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>
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>
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>
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 |