¿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

    estafas-vacacionales

    ¡Ojo con las estafas vacacionales en vísperas de Semana Santa!

    Cada puente o periodo de vacaciones, surgen todo tipo de estafas vacacionales. Al margen de una enfermedad, lo peor que le puede pasar a una persona es que le arruinen sus vacaciones. Fraudes siempre ha habido, de todo tipo, pero ahora que todo lo gestionamos de manera digital, las trampas se han multiplicado. Cabe recordar

    Zenfone-11-Ultra

    Zenfone 11 Ultra, que siga la fiesta de la IA en los smartphones

    Todos los últimos lanzamientos de smartphones están marcados por la inteligencia artificial. Este hecho, que ocupa los titulares de hoy, se está convirtiendo en un estándar y pronto dejará de ser noticia. Pero no estos momentos es la novedad y la transformación hacia la que caminan todas las marcas del mercado. Así lo ha hecho

    Enco-Buds2-Pro

    Enco Buds2 Pro: unos auriculares buenos, bonitos, baratos e inteligentes

    Por menos de 50 euros, los auriculares OPPO Enco Buds2 Pro pueden darnos todo lo que necesitamos para nuestro día a día. ¿Por qué? Porque son una combinación excepcional de calidad de sonido, duración de batería extendida y un diseño moderno y funcional. Además cuentan con funciones inteligentes y dan a los usuarios la libertad

    Xiaomi-14-Series

    Xiaomi 14 Series se suma a la puja por ser el móvil del año

    Xiaomi 14 Series llega al mercado para colarse en la eterna batalla que mantienen los flagships de Apple y Samsung. Al igual que sus rivales, los nuevos móviles de la marca china llegan con la IA bajo el brazo y una gran cantidad de razones para aspirar a ser uno de los móviles del 2024.