Skip to content
Related Articles

Related Articles

How to select only direct children from element with Sass?
  • Last Updated : 02 Nov, 2020

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:




<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:






div {
    & > p {
       background-color: yellow;
    }
}

app.module.ts:




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.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :