¿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.

  • Deja un comentario

    TAMBIÉN TE INTERESA

    OPPO-Reno8-5G

    Ya a la venta los nuevos teléfonos OPPO Reno8

    OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

    batería-portátil-DELTA-2

    Esta batería portátil es top y acaba de salir a la venta

    Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

    GoPro-HERO11

    GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

    La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

    camara-motorola-edge-30-ultra

    ¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

    El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

    nuevo-apple-watch-ultra

    Un reloj inteligente solo para los elegidos: Apple Watch Ultra

    Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo