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

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.

¿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.

Pseudo-selectores

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.

Pseudo-elementos

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.

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.