Pseudo-clases CSS

Qué son las pseudo-clases?

Las pseudo-clases son usadas para definir un estado especial de un elemento. Por ejm, se pueden usar para:

  • Dar estilo a un elemento cuando un usuario pasa el ratón sobre él.
  • Dar estilos diferentes a enlaces visitados y sin visitar.
  • Dar estilo a un elemento cuando es el foco.

Sintaxis

La sintaxis sería la siguiente:

selector:pseudo-clase {
  propiedad: valor;
}

Anchor Pseudo-classes

Los enlaces pueden ser mostrados de diferentes maneras.

Ejm

/* enlace no visitado */
a:link {
color: #FF0000;
}/* enlace visitado*/
a:visited {
color: #00FF00;
}/* botón sobre enlace */
a:hover {
color: #FF00FF;
}/* enlace seleccionado */
a:active {
color: #0000FF;
}

Nota: a:hover DEBE ir después de a:link y a:visited en la definición de CSS para que sea efectivo. a:active DEBE ir después de a:hover en la definición de CSS para que sea efectivo. Los nombres de pseudoclases no distinguen entre mayúsculas y minúsculas.

Pseudo-clases y clases HTML

Las pseudo-clases se pueden combinar con las clases HTML.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-clases y clases HTML</h2>

<p>Cuando pasa el cursor sobre el primer enlace a continuación, 
cambiará el color y el tamaño de fuente:</p>

<p><a class="highlight" href="css_syntax.asp">Sintaxis CSS</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

Hover en <div>

Veamos un ejm de usar hover en la etiqueta <div>.

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}

div:hover {
background-color: blue;
}
</style>
</head>
<body>

<p>Pasa el mouse sobre el elemento div a continuación para cambiar su color de fondo:</p>

<div>Mouse Over Me</div>

</body>
</html>

Simple Tooltip Hover

Pasa el cursor sobre un elemento <div> para mostrar un elemento <p> (como una información sobre herramientas).

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}
</style>
</head>

<body>
<div>
Situate sobre este elemento para mostrar el elemento p
<p>Ahora me muestro</p>
</div>
</body>
</html>

La pseudo-clase :first-child

La pseudoclase :first-child coincide con un elemento especificado que es el primer hijo de otro elemento.

Coincide con el primer elemento <p>

En el siguiente ejemplo, el selector coincide con cualquier elemento <p> que sea el primer hijo de cualquier elemento.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
<p>This is some text.</p>
<p>This is some text.</p>
</div>

</body>
</html>

El resultado sería el siguiente:

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

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

El resultado sería el siguiente:

Hacer coincidir todos los elementos <i> en todos los primeros elementos secundarios <p>

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

El resultado sería el siguiente:

Tabla de pseudo-clases

Selector Ejemplo Descripción del ejemplo
:active a:active Selecciona el enlace activo
:checked input:checked Selecciona cada elemento <input> marcado
:disabled input:disabled Selecciona cada elemento <input> deshabilitado
:empty p:empty Selecciona cada elemento <p> que no tiene hijos
:enabled input:enabled Selecciona cada elemento <input> habilitado
:first-child p:first-child Selecciona todos los elementos <p> que son el primer hijo de su padre
:first-of-type p:first-of-type Selecciona cada elemento <p> que es el primer elemento <p> de su padre
:focus input:focus Selecciona el elemento <input> que tiene el foco
:hover a:hover Selecciona enlaces al pasar el ratón por encima
:in-range input:in-range Selecciona elementos <input> con un valor dentro de un rango especificado
:invalid input:invalid Selecciona todos los elementos <input> con un valor no válido
:lang(language) p:lang(it) Selecciona cada elemento <p> con un valor de atributo lang que comienza con «it»
:last-child p:last-child Selecciona cada elemento <p> que es el último hijo de su padre
:last-of-type p:last-of-type Selecciona cada elemento <p> que es el último elemento <p> de su padre
:link a:link Selecciona todos los enlaces no visitados
:not(selector) :not(p) Selecciona cada elemento que no es un elemento <p>
:nth-child(n) p:nth-child(2) Selecciona cada elemento <p> que es el segundo hijo de su padre
:nth-last-child(n) p:nth-last-child(2) Selecciona cada elemento <p> que es el segundo hijo de su padre, contando desde el último hijo
:nth-last-of-type(n) p:nth-last-of-type(2) Selecciona cada elemento <p> que es el segundo elemento <p> de su padre, contando desde el último hijo
:nth-of-type(n) p:nth-of-type(2) Selecciona cada elemento <p> que es el segundo elemento <p> de su padre
:only-of-type p:only-of-type Selecciona cada elemento <p> que es el único elemento <p> de su padre
:only-child p:only-child Selecciona cada elemento <p> que es el único hijo de su padre
:optional input:optional Selecciona elementos <input> sin atributo «requerido»
:out-of-range input:out-of-range Selecciona elementos <input> con un valor fuera de un rango especificado
:read-only input:read-only Selecciona elementos <input> con un atributo de «readonly» especificado
:read-write input:read-write Selecciona elementos <input> sin atributo de «readonly»
:required input:required Selecciona elementos <input> con un atributo «required» especificado
:root root Selecciona el elemento raíz del documento.
:target #news:target Selecciona el elemento #news activo actual (haciendo clic en una URL que contiene ese nombre de ancla)
:valid input:valid Selecciona todos los elementos <input> con un valor válido
:visited a:visited Selecciona todos los enlaces visitados

Todos los pseudo-elementos

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 Selecciona la primera letra de cada elemento <p>
::first-line p::first-line Selecciona la primera línea de cada elemento <p>
::selection p::selection Selects the portion of an element that is selected by a user