Selector de descendiente de CSS
- Página anterior Detalles del selector de selector de atributo de CSS
- Página siguiente Selector de elemento hijo de CSS
El selector de descendiente (descendant selector) también se conoce como selector de contenedor.
El selector de descendientes puede seleccionar elementos que son descendientes de algún elemento.
Elección de elementos según el contexto
Podemos definir reglas de selectores de descendientes para que estas reglas funcionen en ciertas estructuras de documentos, pero no en otras.
Por ejemplo, si desea aplicar estilos solo a los elementos em dentro de un elemento h1, puede escribirlo así:
h1 em {color:red;}
Esta regla cambiará el texto del elemento em que es descendiente de un elemento h1 a rojo. Otros textos em (como párrafos o citas bloques) no se seleccionarán por esta regla:
<h1>Este es un <em>importante</em> encabezado</h1> <p>Este es un párrafo <em>importante</em>.</p>
Por supuesto, también se puede colocar un atributo de clase en cada elemento em que se encuentre en h1, pero es obvio que el selector de descendientes es más eficiente.
Explicación gramatical
En el selector de descendientes, el lado izquierdo de la regla incluye dos o más selectores separados por espacios. Los espacios entre los selectores son un operador de combinación. Cada operador de combinación se puede interpretar como "... encontrado en ...", "... como parte de ...", "... como descendiente de ...", pero se debe leer el selector desde la derecha a la izquierda.
Por lo tanto, el selector h1 em se puede interpretar como "cualquier elemento em que sea descendiente de un elemento h1". Si se lee el selector de izquierda a derecha, se puede decir lo siguiente: "Todos los h1 que contienen em aplicarán el siguiente estilo al em".
Aplicación específica
La función del selector de descendientes es extremadamente poderosa. Con él, se pueden hacer posibles tareas que no se pueden implementar en HTML.
Supongamos que hay un documento que contiene una barra lateral y una área principal. El fondo de la barra lateral es azul, y el fondo de la área principal es blanco. Ambas áreas contienen listas de enlaces. No se puede establecer todos los enlaces en azul, porque de lo contrario, los enlaces azules en la barra lateral no se verán.
La solución es usar el selector de descendientes. En este caso, se puede asignar el atributo de clase sidebar con valor sidebar al div que contiene la barra lateral, y establecer el valor de la clase del área principal en maincontent. Luego, escribir el siguiente estilo:
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
Hay un aspecto fácil de pasar por alto en los selectores de descendiente, es que la distancia entre dos elementos puede ser ilimitada.
Por ejemplo, si se escribe ul em, esta sintaxis seleccionará todos los elementos em heredados de los elementos ul, sin importar cuántas capas de nesting tenga el em.
Por lo tanto, ul em seleccionará todos los elementos em en los siguientes marcadores:
<ul>
<li>Elemento de lista 1</li>
<ol>
<li>Elemento de lista 1-1</li>
<li>Elemento de lista 1-2</li>
<li>Elemento de lista 1-3</li>
<ol>
<li>Elemento de lista 1-3-1</li>
<li>Elemento de lista</li> <em>1-3-2</em></li>
<li>Elemento de lista 1-3-3</li>
</ol>
</li>
<li>Elemento de lista 1-4</li>
</ol>
</li>
<li>Elemento de lista 2</li>
<li>Elemento de lista 3</li>
</ul>
- Página anterior Detalles del selector de selector de atributo de CSS
- Página siguiente Selector de elemento hijo de CSS
