¿Cómo seleccionar solo niños directos del elemento con Sass?

Introducción:
Sass es un lenguaje de secuencias de comandos que se compila en hojas de estilo en cascada (CSS). Es una especie de lenguaje de preprocesador. Inicialmente fue diseñado por Hampton Catlin y luego fue desarrollado por Natalie Weizenbaum. Después de sus versiones iniciales, Weizenbaum y Chris Eppstein continuaron ampliando SASS con SassScript. Admite cuatro tipos de datos y son números, strings, colores y booleanos. El anidamiento también funciona en este idioma.

Enfoque con respecto a la pregunta:

• Primero definió el contenido en un archivo .html .
• En el archivo HTML de su contenido, asegúrese de colocar etiquetas secundarias o tener etiquetas secundarias dentro de una etiqueta principal.
• Una vez que haya terminado con la etiqueta HTML, use ” & ” y ” > ” en el archivo SCSS para diseñar los elementos secundarios directos.

Implementación Por código:

aplicación.componente.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>

aplicación.componente.scss:

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

aplicación.módulo.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 { }

Producción:

Si observa claramente la captura de pantalla anterior, ya que el color de fondo se aplica solo a los niños directos.