CSS: selectores y combinadores
Si eres un desarrollador que se preocupa un poco por los usuarios, probablemente no quieras que tu sitio se vea así 👇🏼.
Por suerte, tenemos CSS para salvarnos. Con CSS podemos dar estilo a nuestro sitio de forma sencilla. Esto se logra a través de seleccionar partes específicas del HTML y decirles cómo queremos que se vean.
Vale. Vale. Suena bien, pero ¿cómo hacemos esta selección de elementos del HTML? Es aquí cuando entran en juego los “selectores”. En este blogpost revisaremos los selectores básicos y cómo es que puedes combinarlos. ¿Ya no puedes esperar más? Pues, vamos. 🚀
Selectores CSS
Los selectores definen sobre qué elementos se aplicará un conjunto de reglas y estilos. Existen distintos tipos, así que, revisemos uno por uno.
Selector universal
Comenzaremos en lo más general. Existe la forma de seleccionar todo el contenido de tu documento HTML. Para esto se usa el simbolo “*”.
👇🏼 Acá puedes ver que le damos el color rojo a absolutamente todo.
Selector de tipo
Utiliza el nombre de la etiqueta HTML para aplicar un estilo.
👇🏼 Observa en el siguiente código que utilizó el selector “p” en CSS para dar estilo a todas las etiquetas <p>.
Selector de ID
Utiliza el ID de un elemento para darle estilo. Es necesario agregar “#” antes del nombre del ID.
👇🏼 Acá añadí un ID al segundo item de la lista y después lo usé para darle color rojo.
Selector de clase
Utiliza el nombre de una clase para dar estilo a todos los elementos con esa clase. Debes agregar “ . ” antes del nombre de la clase.
👇🏼 Añadí una clase a cada elemento de la lista y después usé esa clase para cambiar el color del texto.
Combinadores CSS
Hasta ahora ya conoces los principales selectores y con ellos ya puedes hacer grandes diseños. Pero para potenciar tu trabajo y tener más opciones al momento de tratar de seleccionar un elemento contamos con los combinadores.
Los combinadores son la unión de más de un selector. Con ellos podemos definir relaciones entre dos selectores simples y definir estilos a solo los elementos que satisfacen la relación.
Combinador de hijo
El combinador “>” selecciona los elementos que son hijos directos del primer elemento.
En el siguiente código seleccionamos las etiquetas <p> que son hijos del <div>.
Combinador de descendiente
Nombrando 2 selectores separados por un espacio, seleccionamos los elementos que son descendientes del primer elemento.
👇🏼 Acá damos color rojo a los elementos <li> descendientes del <div>.
Combinador de hermano
Usando ~ podemos seleccionar hermanos. Es necesario que el segundo elemento se encuentre después del primero y ambos compartan el mismo elemento padre.
En el siguiente código seleccionamos todos los <p> hermanos del <h1>.
Combinador de hermano adyacente
El combinador + selecciona hermanos adyacentes. Es necesario que el segundo elemento siga inmediatamente al primero y ambos compartan el mismo elemento padre.
👇🏼 Acá seleccionamos solo a la etiqueta <p> adyacente al <h1>.
🎉 Si llegaste hasta acá ya eres todo un maestro jedi de los selectores y combinadores con CSS. ¡Felicidades! Ahora, puedes ir a leer alguno de mis otros blogposts y seguir aprendiendo. Encuéntralos aquí. 👈🏼
Si te gusto este post, asegúrate de suscribirte para enterarte de nuevas publicaciones. 😁