¿Cuáles son pseudo-clases?
Un pseudo-clase se utiliza para definir un estado especial de un elemento.
Por ejemplo, se puede utilizar para:
- Estilo un elemento cuando se coloca el ratón sobre ella
- Estilo visitados y no visitados enlaces de manera diferente
- Estilo un elemento cuando se pone el foco
Pase el ratón sobre mí
Sintaxis
La sintaxis de pseudo-clases:
selector:pseudo-class {
property:value;
}Las pseudo-clases de anclaje
Enlaces se pueden mostrar de diferentes maneras:
Ejemplo
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Inténtalo tú mismo "  | Nota: a:hover debe venir después a:link y a:visited ! En la definición CSS con el fin de ser eficaz a:active debe ser posterior a:hover en la definición CSS con el fin de ser eficaz!los nombres de las pseudo-clases no son mayúsculas y minúsculas. |
|---|
Las pseudo-clases y clases CSS
Las pseudo-clases se pueden combinar con clases CSS:
Al pasar sobre el enlace en el ejemplo, que va a cambiar de color:
Pase el ratón sobre el <div>
Un ejemplo del uso del :hover pseudo-clase en un <div> elemento:
CSS - El :first-child pseudo-clase
El :first-child pseudo-clase coincide con un elemento especificado que es el primer hijo de otro elemento.
Coincidir con la primera <p> elemento
En el siguiente ejemplo, el selector coincide con cualquier <p> elemento que es el primer hijo de cualquier elemento:
Coinciden con los primeros <i> elemento en toda <p> elementos
En el siguiente ejemplo, el selector coincide con el primer <i> elemento en todos los <p> elementos:
Coincidir con todos los <i> elementos en todo primer hijo <p> elementos
En el siguiente ejemplo, el selector equivale a todos los <i> elementos <p> elementos que son el primer hijo de otro elemento:
CSS - El :lang Pseudo-clase
El :lang pseudo-clase le permite definir reglas especiales para diferentes idiomas.
En el siguiente ejemplo, :lang define las comillas de <q> elementos con lang="no" :
Ejemplo
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Inténtalo tú mismo " 
Más ejemplos
Añadir a diferentes estilos de hipervínculos
Este ejemplo muestra cómo agregar otros estilos de hipervínculos.
El uso de :focus
Este ejemplo muestra cómo utilizar el :focus pseudo-clase.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»
Todas las clases CSS Pseudo
| Selector | Ejemplo | Descripción ejemplo |
|---|---|---|
| :active | a:active | Se selecciona el vínculo activo |
| :checked | input:checked | Selecciona cada comprobado <input> elemento |
| :disabled | input:disabled | Selecciona todas las personas con discapacidad <input> elemento |
| :empty | p:empty | Selecciona todos los <p> elemento que no tiene hijos |
| :enabled | input:enabled | Selecciona cada habilitado <input> elemento |
| :first-child | p:first-child | Selecciona cada <p> elementos que es el primer hijo de su padre |
| :first-of-type | p:first-of-type | Selecciona todos los <p> elemento que es el primer <p> elemento de su padre |
| :focus | input:focus | Selecciona el <input> elemento que tiene el foco |
| :hover | a:hover | Selecciona el ratón por encima enlaces |
| :in-range | input:in-range | Selecciona <input> elementos con un valor dentro de un rango especificado |
| :invalid | input:invalid | Selecciona todos los <input> elementos con un valor no válido |
| :lang(language) | p:lang(it) | Selecciona todos los <p> elemento con un valor de atributo lang que comienzan con "ella" |
| :last-child | p:last-child | Selecciona cada <p> elementos que es el último hijo de su padre |
| :last-of-type | p:last-of-type | Selecciona todos los <p> elemento que es el último <p> elemento de su padre |
| :link | a:link | Selecciona todos los enlaces no visitados |
| :not(selector) | :not(p) | Selecciona cada elemento que no es un <p> elemento |
| :nth-child(n) | p:nth-child(2) | Selecciona todos los <p> elemento que es el segundo hijo de su padre |
| :nth-last-child(n) | p:nth-last-child(2) | Selecciona todos los <p> elemento que es el segundo hijo de su padre, a contar desde el último hijo |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona todos los <p> elemento que es el segundo <p> elemento de su padre, a contar desde el último hijo |
| :nth-of-type(n) | p:nth-of-type(2) | Selecciona todos los <p> elemento que es el segundo <p> elemento de su padre |
| :only-of-type | p:only-of-type | Selecciona todos los <p> elemento que es la única <p> elemento de su padre |
| :only-child | p:only-child | Selecciona todos los <p> elemento que es el único hijo de su padre |
| :optional | input:optional | Selecciona <input> elementos que no tienen "required" atributo |
| :out-of-range | input:out-of-range | Selecciona <input> elementos con un valor fuera de un rango especificado |
| :read-only | input:read-only | Selecciona <input> elementos con un "readonly" atributo especifica |
| :read-write | input:read-write | Selecciona <input> elementos que no tienen "readonly" atributo |
| :required | input:required | Selecciona <input> elementos con una "required" atributo especificado |
| :root | root | Selecciona elemento raíz del documento |
| :target | #news:target | Selecciona el elemento #news activa actual (hecho clic en un enlace que contiene ese nombre de ancla) |
| :valid | input:valid | Selecciona todos los <input> elementos con un valor válido |
| :visited | a:visited | Selecciona todos los enlaces visitados |
Todos los elementos Pseudo CSS
| Selector | Ejemplo | Descripción ejemplo |
|---|---|---|
| ::after | p::after | Insertar contenido después de cada <p> elemento |
| ::before | p::before | Insertar contenido antes de cada <p> elemento |
| ::first-letter | p::first-letter | Selecciona la primera letra de cada <p> elemento |
| ::first-line | p::first-line | Selecciona la primera línea de cada <p> elemento |
| ::selection | p::selection | Selecciona la parte de un elemento que es seleccionado por un usuario |