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

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

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

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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *