Selectores y pseudo clases CSS. Descripción, uso y ejemplos - Blog Yunbit Software

Para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector CSS se puede definir 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 CSS nos permite 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 siguiente estructura de elementos anidados a los que iremos aplicando diferentes estilos para así explicar el uso de dichos selectores (más allá de ciertos estilos que he aplicado al documento para su correcta visualización):

HTML:

<div id="abuelo">
    <p>Párrafo 1</p>
    <p>Párrafo 2</p>
    <div class="padre">
        <div class="hijo"><a title="Título hijo1">HIJO1</a></div>
        <div class="hijo"><a>HIJO2</a></div>
        <div class="hijo"><a>HIJO3</a></div>
    </div>
    <p>Párrafo 3</p>
    <p>Párrafo 4</p>
    <div class="padre">
        <div class="hijo"><a title="Título hijo4">HIJO4</a></div>
        <div class="hijo"><a>HIJO5</a></div>
        <div class="hijo"><a>HIJO6</a></div>
    </div>
    <p>Párrafo 5</p>
    <p>Párrafo 6</p>
</div>

Selector de elemento: div, p, table…

Es el selector más común, que identifica directamente a las etiquetas HTML. Los estilos se aplican a todos los elementos mencionados. En el siguiente ejemplo, vemos cómo aplicamos un fondo gris a todas las capas “div“.

CSS Ejemplo 1:

div{ background-color:#dddddd; }

EJEMPLO 1:

Selector de elementos descencientes: elementoA elementoB

El selector de elementos descendientes es similar al anterior, pero en este caso identificamos elementos HTML (elementoB) que están contenidos dentro de otros (elementoA). En el siguiente ejemplo, aplicamos estilos a todos los enlaces a contenidos en un div.

CSS Ejemplo 2:

div a{
    background-color:#009cde;
    color:#ffffff;
    text-decoration:none;
}

EJEMPLO 2:

Los selectores descendientes tienen más prioridad sobre otros según el elemento desde el que partimos (según su ascendente). En el ejemplo mostrado aplicamos los estilos a cualquier enlace a que esté contenido dentro de un div, por lo que no indicamos si es un div class=”hijo”, class=”padre” o id=”abuelo”. Como existen tres div por encima del enlace, podríamos crear un selector “div div div a” que aplicaría a todos los enlaces que tengan tres div ascendentes, y estos estilos tendrían más prioridad que los del selector “div a” del ejemplo anterior. Hagamos la prueba:

CSS Ejemplo 3:

div a{
    background-color:#009cde;
    color:#ffffff;
}
div div div a{
    background-color:red;
    color:yellow;
}

EJEMPLO 3:

Selector de clase: .class

El selector de clase aplica sus estilos a todos los elementos HTML que incluyan dicho nombre de clase. Para declarar este selector CSS incluimos el nombre de clase precedido de un punto (.)

CSS Ejemplo 4:

.padre{ background-color:#009cde; }

EJEMPLO 4:

Selector de identificador: #id

El selector de identificador aplica sus estilos al elemento HTML cuyo id tenga dicho nombre. Para declarar este selector CSS incluimos el nombre del identificador precedido de una almohadilla (#).

CSS Ejemplo 5:

#abuelo{ border-color:#009cde; }

EJEMPLO 5:

Selector global: *

El selector global aplica sus estilos a todos los elementos HTML del documento, sin importar el tipo de etiqueta, clase, id o su ascendencia/descendencia. Es un asterisco (*), y hay que tener cuidado con su uso porque afecta a todos los elementos sin distinción (incluido el body), y esto puede repercutir en el rendimiento general del proyecto.

CSS Ejemplo 6:

*{ background-color:#009cde; }

EJEMPLO 6:

Selector de adyacencia: elementoA + elementoB

Los selectores de adyacencia son aquellos que se aplican solamente al primer elemento que sigue a otro, es decir, el primer adyacente o “hermano”. Es importante señalar que afecta al elemento tras el primero a su mismo nivel, pero no está contenido dentro de él.

CSS Ejemplo 7:

.padre + p{ background-color:#009cde; }

EJEMPLO 7:

Selector de hijos directos: elementoA > elementoB

Este selector permite aplicar estilos a los elementos B contenidos en elementos A, siempre y cuando sean descendientes directos. Como podemos ver en el siguiente ejemplo, solo afectan a los div inmediatamente directos (class=”padre”), y no afecta a los div class=”hijos”.

CSS Ejemplo 8:

#abuelo > div{ border-color:red; }

EJEMPLO 8:

Selector de hermanos: elementoA ~ elementoB

El selector de hermanos aplica estilos a todos los elementos B adyacentes o hermanos al elemento A, siempre y cuando vayan tras éste y no antes, y al mismo nivel. Como podemos observar en el siguiente ejemplo, afecta a todos los párrafos que están al mismo nivel y tras los elementos class=”padre”, pero no a los anteriores.

CSS Ejemplo 9:

.padre ~ p{ background-color:#009cde; }

EJEMPLO 9:

SELECTORES DE ATRIBUTOS

Los selectores de atributos son bastante desconocidos por lo general, ya que solemos utilizar otros selectores para dar estilos a determinados casos añadiendo clases específicas a los elementos o a través de javascript. Pero si llegamos a controlar correctamente los selectores de atributo, podemos crear una hoja de estilos realmente avanzada sin necesidad de clases o programación añadida.

Selector de atributo: [atributo]

Un selector muy poco utilizado, pero con mucha utilidad. Nos permite seleccionar elementos que contienen un atributo específico, como elementos que tengan atributos “data” o en el siguiente ejemplo, enlaces con atributo “title“.

CSS Ejemplo 10:

a[title]{ background-color:red; }

EJEMPLO 10:

Selector de valor de atributo: [atributo=valor]

Otro selector casi desconocido. Permite seleccionar solamente aquellos elementos que dispongan de un atributo cuyo valor sea igual al especificado en el selector. Continuando con el ejemplo anterior, podemos dar estilos al primer enlace de la siguiente forma.

CSS Ejemplo 11:

a[title="Título hijo1"]{ background-color:red; }

EJEMPLO 11:

Selector de término de atributo: [atributo~=término]

Sin duda más enrevesado pero más útil que el anterior. Permite seleccionar solamente aquellos elementos que disponga de un atributo en cuyo valor aparezca el término especificado en el selector. Este término debe ser una palabra completa, no pueden especificarse unos caracteres sueltos. Continuando con el ejemplo anterior, podemos dar estilo a todos los elementos en cuyo atributo “title” aparezca la palabra “Título“.

CSS Ejemplo 12:

a[title~="Título"]{ background-color:red; }

EJEMPLO 12:

Diferentes selectores de términos de atributo. [atributo^=término] , [atributo$=término] , [atributo*=término]

Para estos selectores no vamos a crear ejemplos debido a que son similares a los anteriores, con pequeñas características que explicamos a continuación. [atributo^=término] permite seleccionar los elementos que dispongan de un atributo cuyo valor comienza con el término especificado en el selector. [atributo$=término] es similar, pero cuyo valor finaliza con el término especificado, y [atributo*=término] es igual, pero el término puede estar contenido en cualquier posición. Estos términos no necesitan ser palabras completas.

PSEUDO CLASES CSS

Las llamadas “pseudo clases” son determinadas palabras clave que se añaden a los selectores para especificar diferentes estados. Si los elementos a los que se aplican dichos selectores cumplen con estas condiciones o estados, se aplican los estilos.

Pseudo clases :hover, :link, :visited, :active

Sin duda estas son las pseudo clases más conocidas, y aunque :hover se puede aplicar a múltiples elementos, todas ellas se suelen utilizar para aplicar diferentes estilos a los enlaces para los estados “sobre”, “sin visitar”, “visitado” y “activo” (al hacer click). Aplicamos diferentes estilos a estos estados en el siguiente ejemplo, al cual hemos aplicado unos “href” en “HIJO2” e “HIJO5” para poder llegar a visualizar todos los ejemplos correctamente y ver cómo influyen unos estados en otros.

CSS Ejemplo 13:

a:hover{ font-weight:bold; background-color:blue; color:white; text-decoration:underline; }
a:link{ text-decoration:none; color:red; }
a:visited{ color:#999999; }
a:active{ background-color:yellow; color:black; }

EJEMPLO 13:

Pseudo clases ::after y ::before

Unas pseudo clases la mar de curiosas, ya que nos permiten insertar contenido después y antes del contenido del elemento al que lo apliquemos a través de la propiedad “content“, y hemos remarcado en negrita el “después y antes del contenido del elemento” porque se hace referencia al contenido del elemento y no al elemento en sí como he leído en muchas descripciones.

Esta propiedad no se limita solo a la inserción de texto, ya que incluso podemos insertar enlaces o imágenes. Más allá de los usos que podemos darle a content, la sintaxis de ::after y ::before viene precedida de dos puntos repetidos (::), aunque realmente por motivos de compatibilidad es preferible usar solamente dos puntos (:)

CSS Ejemplo 14:

.padre:after{
    content:"Contenido insertado tras el contenido de los elementos '.padre'";
    color:#009cde;
    font-weight: bold;
    text-transform: uppercase;
}
.padre:before{
    content:"Contenido insertado antes del contenido de los elementos '.padre'";
    color:#0000ff;
    font-style: italic;
    font-size: 0.8rem;
}

EJEMPLO 14:

Pseudo clase :empty

La especificación dice que es una pseudo clase que se aplica a los elementos que no tienen hijos (incluyendo nodos de texto), aunque realmente su traducción literal es mucho más exacta, ya que se aplica sobre los elementos vacíos (sin contenido). Es muy útil para aquellos desarrollos en los que se añaden párrafos vacíos por defecto al finalizar los contenidos, ya sea para eliminarlos o manipularlos. En este caso y para poder visualizar correctamente el ejemplo, hemos dejado el primer párrafo vacío.

CSS Ejemplo 15:

p:empty{
    height: 20px;
    background: #ff0000;
}

EJEMPLO 15:

Pseudo clase elementoA:not(elementoB)

Otra pseudo clase muy útil pero poco utilizada. Aplica a todos los elementos A, excepto a los incluidos como elementos B. Es decir, podríamos aplicar unos estilos a todos los elementos “div” y evitar que éstos se apliquen a otras capas con un id o class determinado. En el siguiente ejemplo hacemos justo esto, evitando que se apliquen los estilos a las capas “padre“.

CSS Ejemplo 16:

div:not(.padre){
    padding-left:40px;
    padding-right:40px;
}

EJEMPLO 16:

PSEUDO CLASES DE POSICIÓN

Las pseudoclases de posición son aquellas que afectan a los elementos que se encuentran en una determinada posición del documento (valga la redundancia), y nos evitan tener que ayudarnos de la programación para crear bucles con clases par/impar para identificar los bloques y cosas por el estilo. También gracias a ellas podemos generar documentos responsive aplicando diferentes estilos según la posición que ocupen los elementos en diferentes resoluciones y dispositivos.

::first-letter y ::first-line

Estas dos primeras pseudo clases de posición afectan particularmente a los textos, y para ser más exactos, a la primera letra y a la primera línea del elemento. Se suelen aplicar en párrafos, y para poder visualizar correctamente el ejemplo, hemos añadido más texto en el primer párrafo de nuestra maquetación, y al igual que ocurría con ::after y ::before, podemos utilizar solo dos puntos (:)

CSS Ejemplo 17:

p:first-line{ font-weight:bold; }
p:first-letter{ font-size:2rem; }

EJEMPLO 17:

:first-child y :last-child

Como su propio nombre indica, los estilos se aplican sobre los primeros o últimos elementos hijos. Es importante destacar que son elementos hijos, por lo que siempre son dependientes de un padre. Esto lo comento porque no es necesario especificar un padre para que funcione, pero por experiencia y para evitar errores, es aconsejable especificar el padre al que nos referimos y después la pseudo clase dirigida al primer o último elemento en cuestión. Yo en todos los ejemplos especificaré un padre. Recordar que si no tenéis un padre que especificar en vuestros desarrollos, siempre podéis referiros a body.

CSS Ejemplo 18:

.padre div:first-child{ font-weight:bold; color:blue; }
.padre div:last-child{ font-style:italic; color:red; }

EJEMPLO 18:

:nth-child(N)

La solución a todos los problemas de maquetación de antaño con las filas y los bloques. Esta pseudo clase aplica sus estilos a todos los elementos hijos cuya posición sea un número “N” respecto a un padre. Este número N no tiene que ser necesariamente un número entero para especificar una posición fija (la posición 2, por ejemplo), ya que también permite insertar fórmulas y palabras específicas. Por ejemplo permite múltiplos de un número (“2n“, que afectaría a todos los elementos cuya posición sea múltiplo de 2), múltiplos que comiencen en una posición determinada (“2n+6“, que afectaría a todos los elementos cuya posición sea múltiplo de 2 pero a partir del elemento en sexta posición) o los elementos en posiciones “par” (even) e “impar” (odd), incluyendo directamente las palabras “even” y “odd” en el paréntesis:

CSS Ejemplo 19:

.padre div:nth-child(2){ font-weight:bold; color:orange; }

EJEMPLO 19:

:nth-last-child(N) , :nth-of-type(N) y :nth-last-of-type(N)

Diferentes combinaciones de pseudo clases de posición que combinan las alternativas que ya hemos explicado anteriormente. :nth-last-child(N) nos permite aplicar estilos al elemento con la posición N respecto al padre comenzando la cuenta por el final (el último hijo). :nth-of-type(N) es similar a :nth-child(N), pero en este caso tiene en cuenta la posición N del elemento que sea del mismo tipo, y :nth-last-of-type(N) es la mezcla de ambas pseudo clases, permite aplicar estilos al elemento en la posición N comenzando desde el final y que sea del mismo tipo.

Existen otro tipo de pseudo clases destinadas a elementos específicos como elementos de fomulario (:checked, :disabled, :focus …) y varias que nos hemos saltado para elementos genéricos que, si bien tienen un menor uso, también pueden ayudaros en vuestros proyectos. En este enlace de w3schools tenéis un listado de todos los selectores y pseudo clases que se pueden utilizar.

Para finalizar, comentaros que todos los selectores se pueden “anidar” en uno solo separándolos mediante comas, de forma que podemos aplicar los mismos estilos a diferentes selectores sin escribirlo varias veces. Ejemplo: div a, #abuelo p:last-child{ font-weight:bold; }

Espero que este artículo os sea de utilidad. ¡Saludos! 😉