La estructura de un documento HTML es similar a la de un árbol genealógico. En tu familia, tienes a tus padres y a otros que vinieron antes que tú. Estos son tus antepasados. Los niños y los que vienen después de ti en ese árbol son tus descendientes. HTML funciona de manera similar. Los elementos que están dentro de otros elementos son sus descendientes. Por ejemplo, como casi todos los elementos HTML están dentro de las etiquetas , serían un descendiente de esos elementos . Esta relación es importante de entender cuando se empieza a trabajar con CSS y se necesita apuntar a elementos específicos para aplicar estilos visuales.
Selectores de descendencia CSS
Un selector de descendientes de CSS se aplica a los elementos que están dentro de otro elemento (o más exactamente, un elemento que es descendiente de otro elemento). Por ejemplo, una lista desordenada tiene una etiqueta con etiquetas como descendientes. Usemos el siguiente HTML como ejemplo:
Las etiquetas LI son descendientes de la etiqueta UL. La etiqueta A es descendiente de las etiquetas LI (descendiente de un niño) y UL (descendiente de un nieto). Si piensas en esto usando el ejemplo del árbol genealógico, el hijo de ese elemento sería el padre, el hijo de ese elemento, y el nieto del nieto.
Entonces, ¿cómo dirigirías elementos específicos en una página web utilizando estos selectores de descendientes? En primer lugar, debe definir los selectores de descendientes utilizando dos (o más) selectores de tipo separados por espacios.
li a { texto-decoración: ninguno;} >
En ese ejemplo, los estilos sólo se aplicarían a un elemento de enlace () que es un descendiente de un elemento de la lista de elementos (
Una cosa importante a recordar es que no importa cuántas etiquetas están entre las etiquetas que usted puede estar usando en su selector de descendientes. Si el segundo elemento está encerrado en algún lugar dentro del primer elemento, será seleccionado como descendiente.
Si desea seleccionar todos los anclajes que descienden de los elementos ul, debe escribir:
ul a { decoración de texto: ninguna ;}
>.
Ahora, estos estilos se aplicarán a cualquier enlace que sea descendiente de un elemento de la lista. También puede escribir este selector
ul li a { decoración de texto: ninguna ;} >
Este es un selector de descendientes que utiliza más de dos selectores de tipo. En este caso, esto se aplicaría a los enlaces que están dentro de una lista de elementos y también dentro de una lista desordenada.
Uso de selectores de clase y selectores de ID
Los selectores de los que desciendes no tienen que ser siempre de tipo descendiente. Por ejemplo, imagina que tienes un área del sitio (como una división) con un atributo ID de «billboard». Podrías poner un selector de descendientes fuera de esa identificación:
#billboard ul { color de fondo: #ccc ;}} >
Esto le daría estilo a la lista desordenada que es un descendiente de un elemento con un ID de «billboard». Puede hacer lo mismo con los valores de clase.
div.billboard ul { color de fondo: #ccc ;}}
>
Esto supone que la división tiene un valor de clase de «billboard». El CSS anterior estilizaría el elemento
- dentro de cualquier división que tenga este valor de clase.
Con los selectores de descendencia se puede llegar a ser muy torpe y verboso. Por ejemplo, si utiliza Dreamweaver para escribir su código HTML, hay una configuración cuando agrega nuevas reglas CSS que creará automáticamente el selector basado en la ubicación del cursor en esa página. Lo que Dreamweaver hace en estos casos es crear un selector de descendientes muy verboso y largo. Esa especificidad no es necesaria para que su CSS funcione. Lo que quieres hacer es encontrar un equilibrio entre un selector de descendientes que sea lo suficientemente específico como para que puedas desglosar los elementos exactos que necesitas (sin estilizar los que no quieres afectar) sin tener reglas CSS que tengan selectores que sean demasiado grandes.
