Se utiliza para seleccionar ciertos elementos, solo cuando esten contenidos dentro de otros.
Por ejemplo, modificaremos la apariencia de todos los elementos "em" que solo esten dentro de los elementos "p"
p em{color:blue;}
<body> <p><em>texto 1</em>... </p> <div>...<em>texto 2</em>... </div> <p><span>...<em>texto 3</em>... </span></p> <em>texto 4</em> </body>
la palabra 'Texto 1' Está dentro de la etiqueta "em" y está contenido en "p". Por lo tanto,cumple con la regla de estilo del código CSS.
la palabra 'Texto 3' Está dentro de la etiqueta "em" y está contenido en "span" y este a su vez está dentro de "p". Por lo tanto, tambien cumple con la regla de estilo.
Las palabras 'Texto 2' y 'Texto 4' dentro de la etiqueta "em" no cumplen con la regla de estilo y el selector contextual no se aplica.En este ejemplo, seleccionaremos todos los elementos "strong" que están contenidos en "p" y a su vez esten dentro de "div":
div p strong{color:red;}
<div> <p><strong>Texto 1 </strong></p> </div>
<div> <strong>Texto 2 </strong> </div>
la palabra 'Texto 1' Está dentro de la etiqueta "strong" y está contenido en "p" y este a su vez está dentro de "div". Por lo tanto,cumple con la regla de estilo
la palabra 'Texto 2' Está dentro de la etiqueta "strong", pero está contenido directamente en "div". Por lo tanto, no cumple con la regla de estilo
div ul li a{color:blue}
<div>
<ul>
<li> Texto 1 </li>
<li><a href=""> Texto 2 </a></li>
<li> Texto 3 </li>
</ul>
</div>
solo la parte resaltada cumple con la condición de la regla de estilo del código CSS
#contenido .destacado em{color:blue;}
<div id="contenido"> <div class="destacado"><em>Texto 2</em></div> </div>
La regla de estilo selecciona todos los elementos "em" que esten dentro de los (div con atributo class="destacado") y que también esten incluidos en los (div con atributo id="contenido").