Pseudo-clases y Pseudo-elementos
03/12/2018 por Casanova

Front.id

Comúnmente se suele decir indistintamente pseudo-clases o pseudo-elementos, pero aunque su objetivo sea el mismo, el de ampliar nuestra capacidad de especificar aquello que necesitamos seleccionar cuando no podemos hacerlo a través de los selectores habituales (class, ID o selector de atributos), hay una leve diferencia entre ambos. Mientras los pseudo-elementos aplican para seleccionar o agregar contenido a un elemento, las pseudo-clases nos permiten seleccionar dicho elemento bajo determinadas condiciones.
Son nuestro pan de cada día a la hora de aplicar estilos a nuestros proyectos y por ello vamos a hacer un repaso de su funcionalidad y casos de uso.

Pseudo-clases:

Están formadas por dos puntos (:) más una palabra clave (por ej.: first-child) y se utilizan para aplicar estilos a un elemento cuando se encuentre en un estado determinado. Por ejemplo al pasar el puntero sobre un link o cuando queremos seleccionar el primer item de un listado, etc.

*Para este articulo repasamos los de uso más común, pero podemos ver un listado completo aquí.

:active

Selecciona el link activo

:checked    

Selecciona los <input> de tipo radio o checkbox como también <option> dentro de un select que está marcado o conmutado a un estado on

:empty

Selecciona cada elemento seleccionado que no tiene hijos

:first-child

Selecciona cada elemento seleccionado que sea primer hijo de su padre. Ver ampliado

:first-of-type  

Selecciona el primer elemento de tipo seleccionado dentro de un contenedor. Ver ampliado

:focus

Selecciona el elemento cuando esta en foco

:hover

Selecciona enlaces al pasar el ratón por encima

:invalid

Selecciona todos los elementos seleccionados con un valor no válido

:last-child

Selecciona el ultimo elemento seleccionado que sea primer hijo de su padre. Ver ampliado

:last-of-type

Selecciona el ultimo elemento de tipo seleccionado dentro de un contenedor. Ver ampliado

:link

Selecciona todos los enlaces no visitados

:not(selector)

Selecciona cualquier elemento que no sea el seleccionado

:nth-child(n)

Selecciona uno o más elementos en función de su posición entre un grupo de hermanos

:optional

Selecciona elementos sin el atributo "required"

:required

Selecciona elementos que posean el atributo "required"

Pseudo-elementos:

En CSS 2, la sintaxis de las pseudo-clases y los pseudo-elementos era la misma, el nombre de la etiqueta seguido de dos puntos y del nombre del pseudo-elemento o de la pseudo-clase. Pero en la recomendación de CSS 3 Selectores, se modificó la notación de los pseudo-elementos a etiqueta::pseudo-elemento (el nombre de la etiqueta seguido dos veces de dos puntos y del nombre del pseudo-elemento) para distinguir unos de otros, pero permitiendo utilizar también la antigua notación.

*Para este articulo repasamos los de uso más común, pero podemos ver un listado completo aquí.

::after 

Inserta algo después del contenido del elemento

::before

Inserta algo antes del contenido del elemento

::first-letter

Selecciona la primer del elemento

::first-line

Selecciona la primer linea del elemento

::selection

Selecciona la parte de un elemento seleccionada por el usuario

Conclusion

El objetivo de este breve repaso es servir de material de consulta rápida a la hora de aplicar nuestros estilos. Como hemos podido ver, el abanico de opciones con el que contamos es muy amplio y es bueno tenerlo en cuenta para evitar malas practicas como la de aplicar estilos inline.

Tags

Add new comment

The content of this field is kept private and will not be shown publicly.

HTML Restringido

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.