Selectores combinadores
Ahora que ya entendemos los selectores básicos, vienen los combinadores, que realmente nos ayudan a ser muchos más específicos 👀.
.
-
Descendientes: En este selector, el que está más a la izquierda es el selector padre y los que están a su derecha serán los selectores hijos, por ejemplo:
.
.
En este selector, eldiv
es el padre y el.rojito
es el hijo. ¿Esto qué significa? Básicamente que este selector va a agarrar cualquier elemento que tenga la clase “rojito”, pero este elemento tiene que estar DENTRO de un div. O sea, si encuentra algún elemento que tenga la clase.rojito
, pero este elemento NO está dentro de undiv
, pues ese elemento NO lo va a agarrar 😄.
.
-
Hijo directo: Este caso es similar al anterior, pero ahora solo agarrará a los hijos que este directamente adentro del padre. Recuerda que en el elemento padre nosotros podemos tener más cajitas con más elementos dentro, en este caso, este selector NO agarrará a esos otros elementos, por ejemplo:
.
.
Al poner el signo>
estoy especificando que quiero seleccionar a cualquier elemento que tenga la clase.rojito
, pero este elemento tiene que estar directamente dentro de un<div>
.
.
.
En este ejemplo el<span>
que está dentro del<section>
NO sería seleccionado porque, aunque está dentro del<div>
NO está directamente dentro del<div>
😄. -
Elemento adyacente: Básicamente selecciona a la etiqueta que esté debajo de la primera etiqueta 👀.
.
. -
General de hermanos: Es similar al adyacente, pero esta vez no solo selecciona al de abajo, sino a cualquiera que esté al mismo nivel que el selector original, es decir, a sus hermanos :3
.
¡Y podemos combinar más selectores! OwO. Por ejemplo:
.
Puedo seleccionar a todas las etiquetas<p>
que estén directamente adentro de cualquier elemento con la claseazulitos
y que a su vez, estos elementos sean hermanos de algún elemento con la clase.rojito
y que este elemento con la clase.rojito
esté dentro de un<div>
OwO:
.
.
Este es un selector MUY específico, y podemos ser aún más específicos, pero quiero que veas como podemos empezar a combinar selectores, y muchas veces es más fácil leer estos selectores de derecha a izquierda 😄.
.
Este puede ser un tema un poco complicado, ¡no te desanimes! Recuerda los consejos, para a practicar un rato, experimenta, curiosea, repite la clase si es necesario, pero hazlo hasta que lo consigas, ¡sé que tú puedes! >:3
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.