Pseudoclases en CSS3
A las 7 pseudoclases ya definidas en CSS2 vamos a añadir 16 nuevas.
:active: Se refiere al estado en el que el usuario hace clic sobre un elemento. CSS1.
:hover: Se refiere al estado cuando pasamos el ratón por encima de un elemento. CSS1.
:visited: Se aplica a enlaces, y se refiere al estado cuando el enlace ya ha sido visitado. CSS1.
:link: Se aplica a enlaces, y indica el estado cuando este no ha sido visitado.CSS1
:first-child: Se aplica al primer elemento hijo de cualquier padre. CSS2.
:lang: permite asignar estilos a un elemento dependiendo de su idioma. CSS2.
:focus: Se refiere al estado de cuando un elemento obtiene el foco. CSS2.
16 pseudo-clases nuevas:
:roto: Aplica hojas de estilos al elemento raíz. En HTML este elemento es la etiqueta <html>.
Ejemplo:
<html>
<head>
<style>
:root
{
background:blue;
}
</style>
</head>
<body>
<div>Esta página tiene fondo azul</div>
</body>
</html>
elemento:last-child: Aplica estilos al último elemento hijo de cualquier padre. a:last-child: Se aplica a todos los enlaces que sean último elemento de cualquier padre.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
a:last-child
{
background-color:blue;
color: white
}
</style>
</head>
<body>
<p>
<a href="enlace1.html">primer enlace del párrafo</a><br/>
<a href="enlace1.html">segundo enlace del párrafo</a><br/>
<a href="enlace1.html">Útimo enlace del párrafo</a>
</p>
<div>
<a href="enlace1.html">primer enlace de la capa</a><br/>
<p>
<a href="enlace1.html">Primer y Útimo enlace del párrafo de la capa</a>
</p>
<a href="enlace1.html">segundo enlace de la capa</a><br/>
<a href="enlace1.html">Útimo enlace de la capa</a>
</div>
</body>
</html>
elemento:nth-child(n): Nos permite asignar una hoja de estilos al elemento hijo n (pasado como parámetro) si coincide con el elemento.
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(0n+2)
{
background-color:blue;
color: white
}
</style>
</head>
<body>
<h1>Párrafos</h1>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<a href="enlace.html">Enlace</a>
<p>Párrafo 3</p>
<p>Párrafo 4</p>
<p>Párrafo 5</p>
</body>
</html>
n puede ser un número, una fórmula o una función.
Ejemplos de los valores que puede tener n:
Ejercicio
1: Al primer elemento.
3: Al tercer elemento.
N: A todos los elementos
0n+1: A todos los elementos
0n+2: A los elementos a partir del dos.
1n: A todos los elementos:
n+2: A los elementos a partir del 2.
even: A los elementos pares
odd: a los elementos impares
2n: A los elementos pares.
2n-1: A los elementos impares
3n+1: Al 1,4,7,..
-n+2: A los dos primeros elementos.
elemento:nth-last-child(n): Nos permite asignar una hoja de estilos al elemento hijo n (pasado como parámetro) empezando a contar desde el último hijo.
<!DOCTYPE html>
<html>
<head>
<style>
a:nth-child(2)
{
background-color:blue;
color: white
}
</style>
</head>
<body>
<p>
<a href="enlace1.html">primer enlace del párrafo</a>
<a href="enlace2.html">segundo enlace del párrafo</a>
<a href="enlace3.html">tercer enlace del párrafo</a>
<a href="enlace4.html">Cuarto enlace del párrafo. Fondo azul ya que es el segundo contando por el final</a>
<a href="enlace5.html">Quinto enlace del párrafo</a>
</div>
</body>
</html>
elemento:nth-of-type(n):
match sibling elements with the same name before it in the document tree :nth-last-of-type(n) match sibling elements with the same name counting up from the bottom elemento:first-of-type match the first sibling element of that type elemento:last-of-type match the last sibling element of that type elemento:only-child Aplica hojas de estilos a los elementos que son solo hijos de su padre. elemento:only-of-type match the element that is the only one of its type e:empty match the element that has no children (including text nodes) :target match an element that is the target of the referring URI :enabled match the element when it's enabled :disabled match the element when it's disabled :checked: Aplica hojas de estilo a los elementos radio button o checkbox que están seleccionados. :not(s): Aplica la hoja de estilos a todos los elementos excepto a los pasados como parámetros. Ejemplo: En el ejemplo siguiente definimos los párrafos de color rojo y al resto le asignamos el color verde.
<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:red;
}
:not(p)
{
color:green;
}
</style>
</head>
<body>
<h1>Párrafos</h1>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<a href="enlace.html">Enlace</a>
<p>Párrafo 3</p>
<p>Párrafo 4</p>
<p>Párrafo 5</p>
</body>
</html>