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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


app.component.scss:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


app.module.ts:

filter_none

edit
close

play_arrow

link
brightness_4
code

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 { }

chevron_right


Output:

If you clearly observe the above screenshot as the background color is applied only to the direct children.

My Personal Notes arrow_drop_up
Recommended Articles
Page :