¿Qué es un Selector Descendente CSS?

¿Qué es un Selector Descendente CSS?

¿Qué es un Selector Descendente CSS?

VALORACIÓN DEL ARTÍCULO:
5/5


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 (

  • ). Todos los demás enlaces de la página que no sean descendientes de un elemento de la lista no tendrán este estilo.

    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.

  • TAMBIÉN TE INTERESA

    seguridad de los datos personales

    Descuidos en tu día a día que comprometen la seguridad de los datos personales

    Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

    planes de entrenamiento con IA

    La era de los gimnasios smart y los planes de entrenamiento con IA

    El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,

    apps de citas

    Apps de citas y el fraude romántico: ligoteo y estafas

    Hay a quien las apps de citas le funcionan muy bien en todos los sentidos. Además de lograr el match deseado, su seguridad no se ve comprometida en ningún momento. Así da gusto, encontrar pareja nunca fue tan sencillo. Otra cosa es que la otra persona con la que se hace match no sea la

    riesgos DeepSeek

    Reportan los primeros riesgos de seguridad en DeepSeek

    Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha