Síntesis de los selectores CSS avanzados más comunes

La frontera entre lo que es un avanzado o básico es débil.

Con los selectores que puedes encontrar en esta entrada se puede abarcar prácticamente todo.

Sin embargo hay ocasiones en las que necesitamos especificar etiquetas o partes del contenido muy concretas y necesitamos ir más allá.

Antes pero, tal vez te interesen estos ejercicios a modo de repaso de conceptos.

• Ejercicio selectors básicos 1
• Ejercicio selectors básicos 2
• Ejercicio selectors básicos 3

¿Todo en orden? Entonces prosigamos.

En primer lugar hay que aprender que existen las pseudo-clases y los pseudo-elementos.  No son exactamente lo mismo.

Se detalla en cada apartado.

Una pseudoclase es un tipo de selector que especifica un estado de un elemento.

El más conocido de todos es :hover.

La pseudoclase permite aplicar estilos en relación al DOM del documento (ver tutorial javascript), en relación al historial de navegación (:visited) o a la relación con el ratón.

A continuación se mencionan los más comunes.

Si quieres la lista completa te recomiendo este enlace.

:root  /*equivalente al selector html{}*/
:first-child /* el primer hijo. un hijo es una etiqueta anidada dentro de otra. */
:last-child /* el último hijo */
:not(p);  /*que no sea un párrafo*/
:last-of-type /* el último elemento del tipo indicado*/
:nth-child(2) /*todos los elementos hijo que sean el segundo*/
:nth-child-first /*todos los elementos hijo que sean el primero*/
:nth-child-last /* todos los elementos hijo que sean el segundo*/

Estas son algunas entradas dónde hago uso de ellos.

• Estilizar una tabla de precios
• Variables css
• Contadores

Un pseudo-elemento se añade a un pseudo-selector.

Permite añadir estilos a una parte concreta de un elemento html.

Por ejemplo ::first-letter permite añadir css a la primera letra de un elemento.

Para diferenciarlos de las pseudo-clases el W3C recomienda escribirlos con dos veces dos puntos «::».

A continuación se mencionan algunos de los más comunes:

::before{};
::after{};
::first-letter{};
::first-line{};
::selection{};

En las siguientes entradas los podéis encontrar explicados y en acción.

• Estilizar listas con iconos.
• Dropcap
• Decorar contenido seleccionado con el ratón.

El selector ::first-line no está desarrollado en ninguna entrada porqué me cuesta encontrarle alguna utilidad (tal vez por desconocimiento).

¡Hola!

Querido lector,

Hay muchísimos más selectores avanzados. En esta entrada he sintetizado algunos de los más comunes.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!