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
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
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 |