3. Pseudoclases

Pseudo classes

pseudo-clases y pseudo-elementos

Dependiendo de la ubicación de los estilos en el documento y su documento

Las hojas de estilo asocian características de estilo a los elementos basándose en las etiquetas de los elementos y en su posición relativa (en el árbol del documento). Las pseudo-clases y los pseudo-elementos permiten hacer referencia a determinados elementos sin basarse en la información contenida en el árbol del documento.

La sintaxis de las pseudo-clases y los pseudo-elementos es la misma: etiqueta:pseudo-elemento_o_pseudo-clase (el nombre de la etiqueta y del pseudo-elemento o de la pseudo-clase separado por dos puntos).

:first-child

:first-child pseudo-clase que indica el primer <p> elemento dentro de un elemento.

div { border: black 5px solid; margin: 10px; padding: 10px; }

div p:first-child { color: red; }

Este el primer <p> dentro del <div>

Segundo <p> dentro del <div>

Tercer <p> dentro del <div>

En este caso: first-child <div> se refiere al primer elemento dentro.

div { border: black 5px solid; margin: 10px; padding: 10px; }

div :first-child { color: red; }

Esto no es un <p> , es un pre <pre>

Primer <p> en el <div> .

Segundo <p> en el<div>

Tercer <p>.

Enlaces :link y :visited

:link (o a:link) utilizaremos pseudo-clases para definir el estilo de un hipervínculo que todavía no se ha hecho clic.

:visited (o a:visited) Se define el estilo de hipervínculo que se visitó anteriormente

Los navegadores recuerdan vínculos visitados anteriormente, pero no de la misma manera.

a:link { color: green; }

a:visited { color: red; }

Este párrafo tiene un enlace a sí mismo. El enlace no aparece como suele ser habitual, porque se muestra en verde.

Este párrafo tiene un enlace a sí mismo. Si el navegador reconoce que el enlace se ha visitado, en vez de en verde, se muestra en rojo.

Privacy and the :visited selector - Plugging the CSS History Leak

a { background-color: white; color: blue; border: white 3px solid; outline: white 3px solid; } a:visited { background-color: yellow; color: red; border-color: black; outline-color: red; }

Este párrafo tiene un enlace a sí mismo. Si el navegador reconoce que el enlace se ha visitado, se muestra en rojo y con el fondo amarillo (y puede que con un borde verde y un contorno azul).

Si se asignan propiedades a la etiqueta a en la hoja de estilo, estas propiedades afectarán tanto a los enlaces como a los destinos que utilicen la etiqueta a. Pero si se asigna propiedades a la pseudo-clase a:link, estas propiedades sólo afectarán a los enlaces.

a { background-color: lightblue; }

a:link { background-color: lightblue; }

Este párrafo contiene un enlace al párrafo siguiente.

Destino definido con la etiqueta <a>.

Este párrafo contiene un enlace al párrafo siguiente.

Destino definido con la etiqueta <a>.

pseudo-clases dinamicas :hover, :active eta :focus

:hover

Pseudo-clase le permite cambiar la apariencia del mouse sobre una elemento

p { background-color: white; color: black; }

a:hover { background-color: black; color: white; }

Este párrafo está escrito en blanco y negro, pero el ratón hace clic en el enlace adyacente cuando pasa sobre los colores.

:active pesudo-klaseak portaera klik egiterakoan adieraziko digu.

p { background-color: white; color: black; }

a:active { background-color: black; color: white; }

Este párrafo está escrito en negro sobre blanco, pero cuando se hace clic en este enlace, el enlace se muestra de color blanco sobre fondo negro.

La pseudo-clase :focus permite especificar el aspecto de un elemento cuando este tiene el foco. Los elementos que admiten el foco en una página web son aquellos que reaccionan a entrada por teclado (por ejemplo, los elementos de los formularios o los enlaces). En el ejemplo siguiente, al hacer clic en un campo de texto (o cambiar de campo con el tabulador), el campo seleccionado se resalta con un borde rojo.

input:focus { border: red 2px dotted; padding: 2px; }

La pseudo-clase de idioma :lang()

La pseudo-clase de idioma :lang() permite especificar el aspecto de los elementos de un idioma determinado. En el ejemplo siguiente se cambia las comillas utilizadas en una cita <q> según el idioma indicado en el atributo lang.

<p>Ambrose Bierce dijo (más o menos) que <q lang="es">una cita es una manera de repetir erróneamente las palabras de otros</q>.</p> <p>Ambrose Bierce dijo (más o menos) que <q lang="en">a quotation is the act of repeating erroneously the words of another</q>.</p>

q:lang(es) { quotes: "«" "»"; } q:lang(en) { quotes: '"' '"'; }

Ambrose Bierce dijo (más o menos) que una cita es una manera de repetir erróneamente las palabras de otros.

Ambrose Bierce dijo (más o menos) que a quotation is the act of repeating erroneously the words of another.

Los pseudo-elementos :first-line y :first-letter

El pseudo-elemento :first-line permite especificar el aspecto de la primera línea de texto.

p:first-line { text-transform: uppercase; }

La primera línea de este párrafo se tiene que ver en mayúsculas. Modifica el tamaño de la fuente o el tamaño de la ventana para ver cómo se modifica el aspecto del párrafo.

En el ejemplo anterior, al hacer zoom se observa como siempre y únicamente la primea línea cambia a mayúsculas.

El pseudo-elemento :first-letter permite especificar el aspecto de la primera letra de texto.

p:first-letter { color: red; }

p:first-letter { background-color: pink; color: red; float: left; font-family: monospace; font-size: 400%; }

La primera letra de este párrafo se tiene que ver en rojo.

Y la primera de éste también.

1 Si es número, también se ve en rojo.

La primera letra de este párrafo es una letra capital, es decir, una letra más grande que ocupa varias líneas de texto. Para ello, en la hoja de estilo tienes que hacer la letra flotante y aumentar su tamaño. En este caso también he cambiado el color y el tipo de letra.

Si hay una imagen al principio del elemento, el aspecto de la primera letra de texto no se modifica.

p:first-letter { color: red; }

La primera letra de este párrafo no se ve en rojo porque hay una imagen.

Pero la primera de éste sí.

Pero si la imagen es una imagen flotante, Firefox no modifica el aspecto de la primera letra de texto, aunque Internet Explorer y Chrome sí lo hacen.

Nota: Internet Explorer 9 modifica el aspecto de la primera letra aunque haya una imagen flotante, pero Internet Explorer 8 no lo hacía.

Nota: En realidad no tengo claro si quien lo hace bien es Firefox e IE8 o Chrome e IE9

Si el primer carácter no es un carácter alfanumérico, el pseudo-elemento se aplica hasta el primer carácter alfanumérico:

p:first-letter { color: red; }

¿Cuántas letras se ven en rojo?

¡En Firefox 1.0.X se ven varias!

¿¿Cuántas letras se ven en rojo??

¿¿¿¿Cuántas letras se ven en rojo????

{Llaves}

#Almohadilla

[Corchetes]

@arroba

@[{}]@

Los pseudo-elementos :before y :after

Contenido generado: content

Los pseudo-elementos :before y :after permiten añadir contenido a un elemento desde la hoja de estilo, al principio o al final del elemento.

Nota: En Firefox y Google Chrome, el contenido generado no puede seleccionarse con el ratón, pero en Internet Explorer sí

El contenido generado mediante la propiedad content puede incluir texto:

p.cuidado:before { content: "Aviso: "; font-weight: bold; text-decoration: underline; }

p.autor-barto:after { content: " (escrito por Barto)."; }

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "cuidado".

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "autor-barto".

Este párrafo es un párrafo <p> sin clase.

El contenido generado mediante la propiedad content puede incluir una imagen indicando su URI:

p.ff:before { content: url("../img/ffO.png"); }

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "ff".

Este párrafo es un párrafo <p> sin clase.

No es válido incluir etiquetas html en la propiedad content, es decir que no sólo los navegadores no hacen caso y lo incluyen como texto, no como código html, sino que al validar la hoja de estilo daría error:

p.cuidado2:before { content: "<em>Aviso:</em> "; }

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo <p> con clase "cuidado2".

Este párrafo es un párrafo <p> sin clase.

Generar contadores: content, counter-increment y counter-reset

Se pueden generar contadores en los pseudo-elementos :after y :before mediante la propiedad content y el valor counter(nombre_de_contador). El contador debe ponerse a cero con la propiedad counter-reset y aumentarse con la propiedad counter-increment.

En los ejemplos siguientes se ha definido un contador que se llama cuenta-parrafos. Este contador se genera al principio de cada párrafo, se pone a cero con el elemento <pre> y se incrementa en cada párrafo.

pre { counter-reset: cuenta-parrafos; }

p:before { content: counter(cuenta-parrafos);

counter-increment: cuenta-parrafos; }

pre { counter-reset: cuenta-parrafos; }

p:before { content: counter(cuenta-parrafos);

counter-increment: cuenta-parrafos; }

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo s<p> in clase.

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

El contador puede incrementarse en cualquier cantidad entera, como muestra el ejemplo siguiente:

pre { counter-reset: cuenta-parrafos; }

p:before { content: counter(cuenta-parrafos);

counter-increment: cuenta-parrafos 10; }

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> sin clase.

Este párrafo es un párrafo s<p> in clase.

Junto con el contador se puede generar texto, como muestra el ejemplo siguiente:

pre { counter-reset: cuenta-parrafos; }

p:before { content: counter(cuenta-parrafos)". ";

counter-increment: cuenta-parrafos; }

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

El contador predeterminado muestra números enteros, pero se puede utilizar cualquiera de los estilos de listas como estilo de contador. El estilo se indica en la propiedad content mediante el valor counter(nombre_de_contador, estilo_de_lista), como muestra el ejemplo siguiente:

pre { counter-reset: cuenta-parrafos; }

p:before { content: counter(cuenta-parrafos, upper-roman)". ";

counter-increment: cuenta-parrafos; }

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

Ejemplo de contadores (este párrafo es un <pre>)

Este párrafo es un párrafo <p> normal y corriente.

Se pueden utilizar varios contadores simultáneamente, como muestra el ejemplo siguiente:

h4 { counter-reset: cuenta-parrafos; counter-reset: cuenta-apartados; }

h5 { counter-reset: cuenta-parrafos; }

h5:before { content: counter(cuenta-apartados, upper-alpha)". ";

counter-increment: cuenta-apartados; }

p:before { content: counter(cuenta-apartados, upper-alpha)"-"counter(cuenta-parrafos)". ";

counter-increment: cuenta-parrafos; }

Ejemplo de contadores

Apartado 1

Este párrafo es un párrafo <p> normal y corriente.

Apartado 2

Este párrafo es un párrafo <p> normal y corriente.

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes

Links can be displayed in different ways in a CSS-supporting browser:

Example

a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

Try it yourself »

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

a.red:visited {color:#FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.

Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

Example

<html>

<head>

<style>

p:first-child

{

color:blue;

}

</style>

</head>

<body>

<p>I am a strong man.</p>

</body>

</html>

Try it yourself »

Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:

Example

<html>

<head>

<style>

p > i:first-child

{

color:blue;

}

</style>

</head>

<body>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

</body>

</html>

Try it yourself »

Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:

Example

<html>

<head>

<style>

p:first-child i

{

color:blue;

}

</style>

</head>

<body>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

</body>

</html>

Try it yourself »

CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified.

In the example below, the :lang class defines the quotation marks for q elements with lang="no":

Example

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

Try it yourself »

More Examples

Add different styles to hyperlinks

This example demonstrates how to add other styles to hyperlinks.

Use of :focus

This example demonstrates how to use the :focus pseudo-class.

All CSS Pseudo Classes/Elements

Page updated

Report abuse