Pseudo-clases CSS

Una pseudo-clase es usada para definir un estado especial de una etiqueta.

Por ejemplo, puede ser usado como:

Dar un estilo de una etiqueta cuando se sobrepone el puntero del mouse.
Dar estilos diferentes para enlaces visitados y enlaces no visitados.
Dar un estilo cuando obtiene el foco.

Sintaxis:

selector:pseudo-clase { propiedad: valor; }

Anclar pseudo-clases

Los enlaces pueden ser mostrados de diferentes maneras:

a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: black;
}
a:active {
  color: red;
}

Nota: a:hover debe aparecer antes de a:link y a:visited en la definición CSS para que sea efectivo. a:active debe aparecer despues de a:hover en la definición CSS para que sea efectivo. Las pseudo-clases no es sensitiva a mayúsculas y minúsculas.

Pseudo-clases y Clases CSS

Las pseudo-clases pueden ser combinadas con las clases CSS.

En el siguiente ejemplo el enlace cambia de color al pasar encima el puntero del mouse:

a.destacado:hover {
  color: green;
}

La pseudo-clase hover

También podemos aplicar un efecto a una etiqueta <div> cuando pase encima el puntero del mouse:

div:hover {
  background-color: blue;
}

La pseudo-clase se puede utilizar para que actue sobre otras etiquetas, usando también los combinadores CSS.

En el siguiente ejemplo muestra una etiqueta <p> anidada en una etiqueta <div> y especificada oculta con la declaración display: none;, pero que se muestra al pasar encima el puntero del mouse a la etiqueta <div>:

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

La pseudo-clase first-child

La pseudo-clase :first-child a la primera etiqueta anidada de otra.

En el siguiente ejemplo, el selector aplica para la primera etiqueta <p> dentro de cualquier otra etiqueta:

p:first-child {
  color: blue;
}

En el siguiente ejemplo, el selector aplica para la primera etiqueta <i> dentro de todas las etiquetas <p>:

p i:first-child {
  color: blue;
}

En el siguiente ejemplo, el selector aplica para todas las etiquetas <i> dentro de la primera etiqueta <p> dentro de otra etiqueta:

p:first-child i {
  color: blue;
}

La pseudo-clase lang

La pseudo-clase :lang permite permite especificar reglas especiales para diferentes lenguajes.

En el siguiente ejemplo, la pseudo-clase :lang define las comillas para la etiqueta <q> con lang=”no”:

<html>
  <head>
    <style>
      q:lang(no) { quotes: “~” “~”;}
    </style>
  </head>
  <body>
    <p>Algún texto <q lang=”no”>Cita dentro del párrafo</q> más texto</p>
  </body>
</html>

Las pseudo-clases CSS:

Selector	Ejemplo	Descripción del ejemplo
`:active`	`a:active`	Aplica a las etiquetas `<a>` cuando se activan.
`:checked`	`input:checked`	Aplica a las etiquetas `input` con el atributo `check` activo.
`:disabled`	`input:disabled`	Aplica a las etiquetas `input` con el atributo disabled.
`:empty`	`p:empty`	Aplica a las etiquetas `<p>` que no tienen etiquetas anidadas.
`:enabled`	`input:enabled`	Aplica a las etiquetas `<input>` activas.
`:first-child`	`p:first-child`	Aplica a cada etiqueta `<p>` que es la primera en el mismo nivel de anidamiento.
`:first-of-type`	`p:first-of-type`	Aplica a cada etiqueta `<p>` que es la primera en el mismo nivel de anidamiento.
`:focus`	`input:focus`	Aplica para la etiqueta `<input>` que tiene el foco.
`:hover`	`a:hover`	Aplica para la etiqueta `<a>` a la que se le pasa el puntero del mouse encima.
`:in-range`	`input:in-range`	Aplica para las etiquetas `<input>` que su valor se encuentra dentro del rango especificado.
`:invalid`	`input:invalid`	Aplica para las etiquetas `<input>` en que su valor es invalido.
`:lang(lenguaje)`	`p:lang(es)`	Aplica para las etiquetas `<p>` con el valor "es" en su atributo lang.
`:last-child`	`p:last-child`	Aplica para las etiquetas `<p>` que son últimas en el mismo nivel de anidamiento.
`:last-of-type`	`p:last-of-type`	Aplica para las etiquetas `<p>` que son últimas en el mismo nivel de anidamiento.
`:link`	`a:link`	Aplica para las etiquetas `<a>`.
`:not(selector)`	`:not(p)`	Aplica para las etiquetas que no son `<p>`.
`:nth-child(n)`	`p:nth-child(2)`	Aplica para las etiquetas `<p>` que son segundas en el mismo nivel de anidamiento.
`:nth-last-child(n)`	`p:nth-last-child(2)`	Aplica para las etiquetas `<p>` que son segundas en el mismo nivel de anidamiento, contando del último al primero.
`:nth-last-of-type(n)`	`p:nth-last-of-type(2)`	Aplica para las etiquetas `<p>` que son segundas en el mismo nivel de anidamiento, contando del último al prmero.
:nth-of-type(n)	p:nth-of-type(2)	Aplica para las etiquetas `<p>` que son segundas en el mismo nivel de anidamiento.
`:only-of-type`	`p:only-of-type`	Aplica para las etiquetas `<p>` que son únicas en el mismo nivel de anidamiento.
`:only-child`	`p:only-child`	Aplica para las etiquetas `<p>` que son únicas en el mismo nivel de anidamiento.
`:opctional`	`input:optional`	Aplica para las etiquetas `<input>` que contienen el atributo required.
`:out-of-range`	`input:out-of-range`	Aplica para las etiquetas `<input>` que su valor se encuentra fuera del rango especificado.
`:read-only`	`input:read-only`	Aplica para las etiquetas `<input>` con el atributo readonly especificado.
`:read-write`	`input:read-write`	Aplica para las etiquetas `<input>` sin el atributo readonly especificado.
`:required`	`input:required`	Aplica para las etiquetas `<input>` con el atributo required especificado.
`:root`	`root`	Aplica la etiqueta root del documento.
`:target`	`#noticias:target`	Aplica a la etiqueta especificada como marcador en un enlace que la nombra en su URL.
`:valid`	`input:valid`	Aplica a las etiquetas `<input>` que su valor es valido.
`:visited`	`a:visited`	Aplica a los enlaces visitados.