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