Ir directamente al contenido de esta página
Tras cada ejemplo incluyo un vínculo a lo que he llamado ejemplo plano; éste consiste en una página que contiene el marcado mínimo sobre el que aplicar los pseudoselectores, y un elemento style con los mismos. Creo que así se comprueba mejor la sintaxis de la que se trata en cada caso.
:first-letterPara el párrafo siguiente se ha aplicado:
p:first-letter{
font-size:200%;
border:2px outset;
padding:0.2em;
margin-right:0.1em;
}
La letra inicial debe aparecer dentro de un cuadro, en un tamaño superior, y el resto del texto debería flotar a su alrededor.
:first-lineAl párrafo siguiente se ha aplicado:
p:first-line{
font-variant:small-caps;
font-weight:bold;
}
La primera línea de este párrafo debe aparecer en versalitas y negrita. El efecto se comprueba mejor variando el ancho de la ventana del navegador o el tamaño de la fuente.
:beforeAl párrafo siguiente se le ha insertado un texto por medio de la siguiente regla:
p:before{
content:"[Éste es el texto añadido] ";
}
Éste es el texto original del párrafo.
:afterAl párrafo siguiente se le ha insertado un texto por medio de la siguiente regla:
p:after{
content:" [Éste es el texto añadido]";
}
Éste es el texto original del párrafo.
:first-childDe la siguiente lista, he elegido el primer li hijo para aplicarle un fondo amarillo:
ul li:first-child{
background-color:#FF0;
}
Si más adelante la lista cambia, no hay que añadir clase alguna: siempre es el primer ítem el que cuenta con este estilo.
li hijo de la lista. Es el que debe mostrar un fondo amarillo.:linkSólo es aplicable al elemento a. Define el color del vínculo no visitado.
a:link{
font-weight:bold;
color:#F60;
}
Nota: Ver abajo el ejemplo de :visited.
:visitedEl siguiente vínculo cuenta con la regla de :link que hemos visto arriba, y la siguiente:
a:visited{
font-weight:normal;
color:#900;
}
:hoverSe da este estado cuando el usuario sitúa el puntero sobre un elemento.
p{
border:1px dashed;
}
p:hover{
border:1px solid;
}
Con las reglas enteriores, el borde del párrafo siguiente se hará sólido al situar el puntero del ratón sobre él.
Este párrafo tiene un borde rayado. Al pasar el puntero del ratón sobre él se hará sólido.
:activeSe da este estado cuando el usuario hace clic sobre un elemento. Con las reglas siguientes, el borde del párrafo se hace sólido al hacer clic.
p{
border:1px dashed;
}
p:active{
border:1px solid;
}
Este párrafo tiene un borde rayado. Al hacer clic sobre él se hará sólido.
:focusEste estado se da cuando el elemento recibe el foco. Las siguientes reglas
input{
background-color:#F8F8F8;
}
input:focus{
background-color:#FFF;
}
hacen que la caja del formulario permanezca en un color gris hasta que recibe el foco, momento en el que cambia a blanco.
Sin el foco, el fondo de la caja es gris. Con el foco, es blanco.
(cc) CodexExempla.org, 2007–2024 Mapa del sitio | XHTML | CSS | AA