Selector de derivación CSS

Selectores derivados

Al definir estilos basándose en la relación contextual de un elemento en su posición, puedes hacer que la marca sea más sencilla.

En CSS1, los selectores que aplican reglas de esta manera se conocen como selectores contextuales (contextual selectors), debido a que dependen de la relación contextual para aplicar o evitar una regla. En CSS2, se les conoce como selectores derivados, pero sin importar cómo los llames, su función es la misma.

Los selectores derivados te permiten determinar el estilo de un etiqueta basándote en la relación contextual del documento. Al utilizar selectores derivados de manera racional, podemos hacer que el código HTML sea más limpio.

Por ejemplo, si deseas que los elementos strong dentro de la lista sean en cursiva en lugar del usual en negrita, puedes definir un selector derivado de la siguiente manera:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Por favor, observa la relación contextual del código azul marcado como <strong>:

<p><strong>Soy en negrita, no en cursiva, porque no estoy en la lista, por lo que esta regla no me afecta</strong></p>
<ol>
<li><strong>Soy en cursiva. Esto se debe a que el elemento strong se encuentra dentro del elemento li.</strong></li>
<li>Soy una fuente normal.</li>
</ol>

En el ejemplo anterior, solo el estilo de letra oblicua de los elementos strong dentro de li se aplica, sin necesidad de definir una clase o id especial para el elemento strong, lo que hace que el código sea más conciso.

Vea también las reglas CSS siguientes:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

A continuación, se muestra el HTML afectado por él:

<p>La palabra enfatizada fuertemente en este párrafo es<strong>rojo</strong>.</p>
<h2>Este subtítulo también es rojo.</h2>
<h2>La palabra enfatizada fuertemente en este subtítulo es<strong>blue</strong>.</h2>

Contenido relacionado

Si necesita aprender más sobre selectores de derivación, lea el siguiente contenido en los tutoriales avanzados de CodeW3C.com: