Saltar la navegación

2.2.- Selectores contextuales.

Aparece una captura de código donde se ven selectores contextuales.

Como vimos, los selectores de elemento se aplican a todos los casos en los que se encuentre el elemento en el documento HTML. En cambio, los selectores contextuales permiten aplicar estilos a los elementos basándose en su contexto o en su relación con otro elemento.

Hay varios tipos de selectores contextuales: descendente, hijo y hermano.

Los selectores descendentes hacen referencia a elementos que están contenidos en otro elemento. Un selector descendente se pone a continuación del selector en el que está contenido separado de él por un espacio en blanco. El siguiente ejemplo especifica que los elementos em deben tener color azul, pero sólo si son descendientes de un elemento de lista (li). El resto de los elementos em no se verán afectados.

Ejemplo:

li em {color: blue;}

Los selectores descendientes también pueden estar anidados en varias capas de profundidad. El siguiente ejemplo pone de color amarillo sólo el texto enfatizado (em) de las anclas (a) que se encuentren en las listas ordenadas (ol).

Ejemplo:

ol a em {color: yellow;}

Si se emplea el selector descendente combinado con el selector universal, se puede restringir el alcance de un selector descendente. El siguiente ejemplo muestra dos párrafos que contienen un hipervínculo. En el primer caso el elemento ancla es descendiente directo del elemento de párrafo y, en el segundo caso, es descendiente directo del elemento span que, a su vez, lo es del elemento de párrafo.

Ejemplo:

<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

Examinemos las dos reglas de estilo siguientes:

p a { color: red; }
p * a { color: red; }

Con la primera se consigue que se muestren los dos enlaces de color rojo, mientras que con la segunda regla sólo se mostraría en rojo el segundo de los enlaces. La razón es que el selector p * a se traduce como "todos los elementos de tipo <a> que se encuentran dentro de cualquier elemento que, a su vez, se encuentra dentro de un elemento de tipo <p>". Como el primer elemento <a> está directamente incluido en un elemento <p>, no se cumple la condición del selector p * a.

Un selector hijo es un caso concreto de un selector descendente en el un selector está contenido directamente en otro, sin que existan niveles intermedios. Un selector hijo se escribe a continuación de su selector padre separándolo de él por el símbolo "mayor que" (>). En el siguiente ejemplo se pone en gris el fondo del texto enfatizado, pero sólo si es hijo directo de un párrafo.

Ejemplo:

p > em {background-color: gray;}

El selector adyacente se utiliza para hacer referencia a un elemento que sigue inmediatamente a otro en el código, con el que comparte el mismo elemento padre. Un selector adyacente se escribe a continuación de otro selector separándolo de él por el símbolo de suma (+). El siguiente ejemplo pondría en color azul el primer párrafo que sigue a una cabecera de primer nivel.

Ejemplo:

h1 + p {color: blue;}

Autoevaluación

Pregunta

Tenemos el siguiente documento XHTML con una hoja de estilo incrustada:

<html>

<head>
    <style type="text/css">
        h2+p {
            color: green;
        }
    </style>
    <title>Una prueba de selectores adyacentes</title>
</head>

<body>
    <h1>Título 1</h1>
    <h2>Subtítulo 1</h2>
    <p>Párrafo 1 </p>
    <h2>Subtítulo 2</h2>
    <p>Párrafo 2</p>
</body>

</html>

Al abrir este documento en un navegador ¿qué texto aparecerá en color rojo?

Respuestas

Título 1.

Subtítulo 1.

Párrafo 1

Subtitulo 2.

Párrafo 2.

Subtítulo 1 y Subtitulo 2.

Párrafo 1 y Párrafo 2.

Retroalimentación