Open In App

How to select only direct children from element with Sass?

Improve
Improve
Like Article
Like
Save
Share
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:




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



Last Updated : 02 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads