
Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para aplicarle estilos de color, tamaño, separación, etc. Los selectores más comunes son aquellos que se asignan a clases (class), identificadores (id) o directamente a elementos HTML como por ejemplo capas (div). Sin embargo en desarrollos complejos necesitamos utilizar otros selectores más avanzados para poder aplicar diferentes estilos en elementos anidados o listados complejos, como puede ser una capa dentro de otra con el mismo nombre de clase.
Hoy en día CSS3 nos permite utilizar múltiples selectores de forma que podemos aplicar estilos a cada uno de los elementos de nuestro desarrollo sin necesidad de aplicar nombres de clase o id. Vamos a realizar un repaso de ellos viendo ejemplos prácticos de su uso. Para ello, utilizaremos la una estructura de elementos anidados a los que iremos aplicando diferentes estilos.
Selectores CSS
Selector | Ejemplo | Descripción |
---|---|---|
.class | .ejemplo | Selecciona todos los elementos con class="ejemplo" |
.class1.class2 | <div class="name1 name2">...</div> | Selecciona todos los elementos con las clases name1 y name2 |
.class1 .class2 | <div class="name1"> <div class="name2"> ... </div> </div> |
Selecciona todos los elementos con .name2 que son descendientes de un elemento con .name1 |
#id | #firstname | Selecciona el elemento con id="firstname" |
* | * | Selecciona todos los elementos |
element | p | Selecciona todos los elementos <p> |
element.class | p.intro | Selecciona todos los <p> con class="intro" |
element,element | div, p | Selecciona todos los <div> y los <p> |
element element | div p | Selecciona los <p> dentro el elemento <div> |
element>element | div > p | Selecciona los <p> hijos directos del elemento <div> |
element+element | div + p | Selecciona los <p> positionados inmediatamente despues del elemento <div> |
element1~element2 | p ~ ul | Selecciona los <ul> precedidos por <p> element (o que antes tienes un p) |
[attribute] | [target] | Selecciona todos los elementos que tengan "attribute" |
[attribute=value] |
[target=_blank] |
Selecciona todos los target="_blank" |
[attribute~=value] | [title~=flower] | Selecciona todos los elementos que contienen un atributo cn la la palabra "flower" |
[attribute|=value] | [lang|=en] | Selecciona todos los elementos cuyo dioma es contienen"en" |
[attribute^=value] | a[href^="https"] | Selecciona todos los elementos <a> cuyo atributo href empieze con "https" |
[attribute$=value] | a[href$=".pdf"] | Selecciona todos los elementos <a> cuyo atributo href termine con ".pdf" |
[attribute*=value] | a[href*="w3schools"] | Selecciona todos los elementos <a> cuyo atributo href contenga el substring "w3schools" |
empty | p:empty | Selecciona todos los elementos <p> que no tienen hijos |
:first-child | p:first-child | Selecciona el elemento <p> que es el primer hijo de su padre |
::first-letter | p::first-letter | Selecciona la primera letra de cada elemento <p>. |
::first-line | p::first-line | Selecciona la primera línea de cada elemento <p>. |
:first-of-type | p:first-of-type | Selecciona cada elemento <p> que es el primer elemento <p> de su padre. |
:last-child | p:last-child | Selecciona el elemento <p> que es el último hijo de su padre |
:last-of-type | p:last-of-type | Selecciona cada elemento <p> que es el último elemento <p> de su padre. |
:link | a:link | Selecciona todos los links |
:not(selector) | :not(p) | Selecciona cada elemento que NO es un <p> |
:nth-child(n) | p:nth-child(2) | Selecciona el elemento <p> que es el segundo hijo de su padre |
:nth-last-child(n) | p:nth-last-child(2) | Selecciona cada elemento <p> que es el segundo hijo de su padre, contando desde el último hijo. |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el último hijo. |
:nth-of-type(n) | p:nth-of-type(2) | Selecciona cada elemento <p> que es el segundo elemento <p> de su padre. |
:only-of-type | p:only-of-type | Selecciona cada elemento <p> que es el único elemento <p> de su padre. |
:only-child | p:only-child | Selecciona cada elemento <p> que es el único hijo de su padre |
EJEMPLOS PRACTICOS
1
[class*="col-"] { border-color: red;}
Asignamos a todos los elementos que contengan la clase con la palabra "col-" el color rojo.
2
a[target="_blank"] { color: green; }
Asignamos a todos los elementos "a" que tengan el atributo target igual a blank, el color verde.
3
a:not([target="_blank"]) { color: purple; }
Asignamos a todos los elementos "a" que NO tengan el atributo target igual a blank, el color morado.
4
li:first-of-type + li {color: red;}
<ul> <li>Uno</li> <li>Soy rojo</li> <li>Tres<br/> </li> </ul>
Asigna el color rojo al primer elemento de la lista adyacente al primer li. O sea al 2 < li >.
5
<style> #pluto h2 ~ p { color: red; } </style>
<article id="pluto"> <h1>Lorem ipsum</h1> <p>Dolor sit amet</p> <h2>Lorem ipsum</h2> <p>Soy rojo</p> <h3>Lorem ipsum</h3> <p>Soy rojo</p> </article>
Con ~ indicamos los elementos que preceden el elemento que se encuentra a la derecha.
En este fragmento de código, ambos párrafos después de < h2 > serán rojos, pero el primero no, ya que no viene después de un < h2 > en el documento.
6.
<style> #pippo + p { color: red; } </style> <div id="pippo"> <span> <p>Soy Silvia</p> </span> <p>Soy Silvia</p> <span> <p>Soy Silvia</p> </span> </div> <p>Soy rojo!</p>
Selecciona todos el elemento p adyacente al div especificado.
7.
<style> div#divb ~ p { background-color:lightgreen; } </style> <div id="divb"> <p>Parrafo - 1 en un div</p> <p>Parrafo - 2 en un div</p> </div> <p>Parrafo - 3 soy verde </p> <p>Parrafo - 4 soy verde</p> <p>Parrafo - 5 en verde </p> <div> <p>Parrafo - 6 en un div</p> </div> <p>Parrafo - 7 soy verde</p>
El ejemplo establece el color de texto rojo para todos los elementos "p" de un hermano en un elemento DIV con ID "divb" (<div id="divb">) .
Los selectores CSS avanzados.
Los selectores CSS avanzados permiten realizar tareas más específicas e incluso contabilizar o seleccionar elementos por su posición.
A menudo nos encntreremos con varios bloques CSS diferentes con los mismos estilos, algo que es perjudicial, ya que esto hará que el documento CSS ocupe más y por lo tanto, tarde más en descargarse.
Una buena práctica es ahorrar texto y simplificar nuestro documento CSS lo máximo posible, por lo que podemos hacer uso de la agrupación CSS.
Consejo: Esto puede parecer poco importante a priori, pero a medida que avanzamos con nuestro diseño, los documentos CSS se hacen tremendamente grandes y difíciles de mantener, por lo que cuanto más sencillo sea, mejor.
CSS | Selectores |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Foto: FreePik

Silvia Mazzetta
Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 6 years old geek, founder of @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple years of website design expertise behind her. She turns conceptual ideas into highly creative visual digital products.
Artículos relacionados
Cómo usar el efecto Parallax.Js en tu sitio web
Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…
Modo oscuro persistente con CSS y JS
Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…
Modo oscuro en el sitio web usando CSS y JavaScript
En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…
Cómo superponer múltiples imágenes usando CSS?
CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…
Cómo usar el Masking en CSS
Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…
¿Cuál es la diferencia entre Flexbox y Grid?
Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…
Transiciones y Transformaciones CSS : guia básica con ejemplos
Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…
Cómo hacer animaciones en CSS3
Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…
Guía de Flexbox: las bases
En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple…
Grid CSS: la unidad fraccionaria
La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las…
4 cosas que no sabías sobre Grid CSS
Durante mucho tiempo, el CSS no contenía un gran número de sorpresas. Desarrollándose a un ritmo tranquilo, el lenguaje se conformaba con estilizar sus fuentes y hacer flotar sus divs,…
24 recursos gratuitos para programadores novatos
Cuando estamos descubriendo nuevas áreas, una pequeña ayuda es siempre bien venida. En la programación, los recursos existen en grandes cantidades para ayudar a todos los tipos de desarrolladores. Para…