Pseudoclases de CSS

¿Qué son las clases pseudo?

Las clases pseudo se utilizan para definir estados especiales de los elementos.

Por ejemplo, se puede usar para:

  • Establecer el estilo del elemento cuando se pasa el ratón sobre él
  • Establecer estilos diferentes para enlaces visitados y no visitados
  • Establecer el estilo del elemento cuando obtiene el foco
Pasa el ratón sobre mí

Sintaxis

Sintaxis de las clases pseudo:

selector:pseudo-class {
  property: value;
}

Clases pseudo de ancla

Los enlaces pueden mostrarse de diferentes maneras:

Ejemplo

/* Enlace no visitado */
a:link {
  color: #FF0000;
}
/* Enlace visitado */
a:visited {
  color: #00FF00;
}
/* Enlace sobre el que se pasa el ratón */
a:hover {
  color: #FF00FF;
}
/* Enlace seleccionado */
a:active {
  color: #0000FF;
}

Pruebe usted mismo

Atención:a:hover Debe estar después de la definición de CSS a:link y a:visited ¡Después de eso才会生效！a:active Debe estar después de la definición de CSS a:hover ¡Después de eso才会生效！Clases pseudo no son sensibles a mayúsculas y minúsculas.

Clases pseudo y clases CSS

Las clases pseudo pueden combinarse con las clases CSS:

Cuando coloca el ratón sobre el enlace del ejemplo, cambia de color:

Ejemplo

a.highlight:hover {
  color: #ff0000;
}

Pruebe usted mismo

Al pasar el ratón sobre <div>

usada en el elemento <div> :hover Clases pseudo:

Ejemplo

div:hover {
  background-color: blue;
}

Pruebe usted mismo

Herramienta de sugerencias simple de desplazamiento

Mueva el ratón sobre el elemento <div> para mostrar el elemento <p> (efecto similar a la herramienta de sugerencias):

Mueva el ratón sobre mí para mostrar el elemento <p>.

Hehe, estoy aquí!

Ejemplo

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

Pruebe usted mismo

CSS - :first-child pseudoclase

:first-child Los pseudoclases coinciden con el elemento especificado: el elemento es el primer hijo de otro elemento.

Coincide con el primer <p> elemento

En el siguiente ejemplo, el selector coincide con cualquier <p> elemento que es el primer hijo de cualquier otro elemento:

Ejemplo

p:first-child {
  color: blue;
}

Pruebe usted mismo

Coincide con todos los elementos <i> en todos los <p> elementos

En el siguiente ejemplo, el selector coincide con todos los elementos <i> que son el primer hijo de cualquier <p> elemento:

Ejemplo

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

Pruebe usted mismo

Coincide con todos los elementos <i> en el primer <p> elemento

En el siguiente ejemplo, el selector coincide con todos los elementos <i> dentro del elemento <p> que es el primer hijo de otro elemento:

Ejemplo

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

Pruebe usted mismo

CSS - :lang pseudoclase

:lang Los pseudoclases permiten definir reglas especiales para diferentes idiomas.

En el siguiente ejemplo,:lang Defina comillas para los elementos <q> con el atributo lang="en":

Ejemplo

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Alguno de texto <q lang="no">Una cita en un párrafo</q> Alguno de texto.</p>
</body>
</html>

Pruebe usted mismo

Más ejemplos

Agregar diferentes estilos a los enlaces
Este ejemplo muestra cómo agregar otros estilos a los enlaces.
Usar :focus
Este ejemplo muestra cómo usar el pseudoclase :focus.

Todos los pseudoclases CSS

Selector Ejemplo Descripción del ejemplo
:active a:active Seleccione cada enlace activo.
:checked input:checked Seleccione cada elemento <input> seleccionado.
:disabled input:disabled Seleccione cada elemento <input> deshabilitado.
:empty p:empty Seleccione cada elemento <p> sin elementos hijos.
:enabled input:enabled Seleccione cada elemento <input> que está activado.
:first-child p:first-child Seleccione cada <p> que es el primer hijo del elemento padre.
:first-of-type p:first-of-type Seleccione cada <p> que es el primer elemento <p> de su elemento padre.
:focus input:focus Seleccione los elementos <input> que tienen el foco.
:hover a:hover Seleccione los enlaces sobre los que se pasa el ratón.
:in-range input:in-range Seleccione los elementos <input> con valores en un rango específico.
:invalid input:invalid Seleccione todos los elementos <input> con valores inválidos.
:lang(language) p:lang(it) Seleccione cada elemento <p> que tiene un valor de atributo lang que comienza con "it".
:last-child p:last-child Seleccione cada <p> que es el último hijo del padre.
:last-of-type p:last-of-type Seleccione cada <p> que es el último elemento <p> de su elemento padre.
:link a:link Seleccione todos los enlaces no visitados.
:not(selector) :not(p) Seleccione cada elemento que no es un elemento <p>.
:nth-child(n) p:nth-child(2) Seleccione cada <p> que es el segundo hijo de su elemento padre.
:nth-last-child(n) p:nth-last-child(2) Seleccione cada <p> que es el segundo hijo del padre, contando desde el último hijo.
:nth-last-of-type(n) p:nth-last-of-type(2) Seleccione cada <p> que es el segundo elemento <p> del padre, contando desde el último hijo.
:nth-of-type(n) p:nth-of-type(2) Seleccione cada <p> que es el segundo elemento <p> de su elemento padre.
:only-of-type p:only-of-type Seleccione cada <p> que es el único elemento de tipo <p> de su elemento padre.
:only-child p:only-child Seleccione el elemento <p> que es el único hijo del elemento padre.
:opcional input:opcional Seleccionar los elementos <input> sin la propiedad "required".
:out-of-range input:out-of-range Seleccionar los elementos <input> con un valor fuera del rango especificado.
:read-only input:read-only Seleccionar los elementos <input> que especifican la propiedad "readonly".
:read-write input:read-write Seleccionar los elementos <input> sin la propiedad "readonly".
:required input:required Seleccionar los elementos <input> que especifican la propiedad "required".
:root root Seleccionar el elemento raíz del elemento.
:target #news:target Seleccionar el elemento #news activo (haga clic en la URL que contiene el nombre del ancla).
:valid input:valid Seleccionar todos los elementos <input> con un valor válido.
:visited a:visited Seleccionar todos los enlaces visitados.

Todos los pseudo-elementos de CSS

Selector Ejemplo Descripción del ejemplo
::after p::after Insertar contenido después de cada elemento <p>.
::before p::before Insertar contenido antes de cada elemento <p>.
::first-letter p::first-letter Seleccionar la primera letra de cada elemento <p>.
::first-line p::first-line Seleccionar la primera línea de cada elemento <p>.
::selection p::selection Seleccionar la parte del elemento elegido por el usuario.