How to select only direct children from element with Sass? Last Updated : 02 Nov, 2020 Comments Improve Suggest changes Like Article Like Report Introduction:Sass is a scripting language that is compiled into Cascading style sheets (CSS). It is a kind of preprocessor language. It was initially designed by Hampton Catlin and then it was developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend SASS with SassScript. It supports four data types and they are Numbers, Strings, Colors, and booleans. Nesting also works in this language. Approach regarding the question: First defined the content in a .html file. In the HTML file in your content make sure that you are placing child tags or having child tags inside a parent tag. Once you are done with the HTML tag then use " & " and " > " in the SCSS file to style the direct children. Implementation By code: app.component.html: html <h1>Welcome to My GeeksForGeeks</h1> <div> <p>One Stop solution for all the Computer Science Concepts </p> </div> <div> <span><p>It is reliable and rich website for students.</p></span> </div> <p>It even has interview experiences which gives insights regarding every company interview</p> app.component.scss: html div { & > p { background-color: yellow; } } app.module.ts: javascript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent], bootstrap: [ AppComponent ] }) export class AppModule { } Output: If you clearly observe the above screenshot as the background color is applied only to the direct children. Comment More infoAdvertise with us Next Article How to select only direct children from element with Sass? B bunnyram19 Follow Improve Article Tags : Web Technologies AngularJS SASS Similar Reads How to select direct parent element of an element in jQuery ? In this article, we will select the direct parent element of an element using jQuery. To select the direct parent element, the parent() method is used. This method finds the parent element related to the selected element. This parent() method traverses a single level up the selected element and retu 1 min read How to create a combined child selector in SASS ? Introduction: Lets first talk about the various types of Combinators available in CSS. Combinator: A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. Ther 2 min read How to Select All Children of an Element Except Last Child using CSS? When designing and developing web applications, there are scenarios where you may want to apply styles to all child elements of a parent except the last one. For instance, you might want to add a border between items in a navigation menu but not include a border after the last item. This can be achi 2 min read How to Select all Child Elements Recursively using CSS? Here are three methods to achieve to Select all Child Elements Recursively using CSS:1. Using the Universal Selector (*)The universal selector applies styles to all child elements within a parent recursively.HTML<html> <head> <style> .parent * { color: blue; font-weight: bold; } 3 min read How to see the changes in whole directory/folder containing many sass files ? SASS is a powerful preprocessing language that helps us to write our code more efficiently in an easy and concise manner. Some of the best features of sass are using variables, support nesting, and using functions. While it has many advantages, keeping track of all the changes in a sass file could s 2 min read Like