How to select only direct children from element with Sass?

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.