3.4.1. La pseudo-clase :first-child
La pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. Si se considera el siguiente ejemplo:
p em:first-child {
color: red;
}
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim. Praesent nulla ante, <em>ultricies</em> id, porttitor ut, pulvinar quis, dui.</p>El selector p em:first-child selecciona el primer elemento <em> que sea hijo de un elemento y que se encuentre dentro de un elemento <p>. Por tanto, en el ejemplo anterior sólo el primer <em> se ve de color rojo.
La pseudo-clase :first-child también se puede utilizar en los selectores simples, como se muestra a continuación:
p:first-child { ... }La regla CSS anterior aplica sus estilos al primer párrafo de cualquier elemento. Si se modifica el ejemplo anterior y se utiliza un selector compuesto:
p:first-child em {
color: red;
}
<body>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
<div>
<p>Lorem <span><em>ipsum dolor</em></span> sit amet, consectetuer adipiscing elit. Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p>
</div>
</body>El selector p:first-child em selecciona todos aquellos elementos <em> que se encuentren dentro de un elemento <p> que sea el primer hijo de cualquier otro elemento.
El primer párrafo del ejemplo anterior es el primer hijo de <body>, por lo que sus <em> se ven de color rojo. El segundo párrafo de la página no es el primer hijo de ningún elemento, por lo que sus elementos <em> interiores no se ven afectados. Por último, el tercer párrafo de la página es el primer hijo del elemento <div>, por lo que sus elementos <em> se ven de la misma forma que los del primer párrafo.
3.4.2. Las pseudo-clases :link y :visited
Las pseudo-clases :link y :visited se pueden utilizar para aplicar diferentes estilos a los enlaces de una misma página:
- La pseudo-clase
:linkse aplica a todos los enlaces que todavía no han sido visitados por el usuario. - La pseudo-clase
:visitedse aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.
El navegador gestiona de forma automática el cambio de enlace no visitado a enlace visitado. Aunque el usuario puede borrar la cache y el historial de navegación de forma explícita, los navegadores también borran de forma periódica la lista de enlaces visitados.
Por su propia definición, las pseudo-clases :link y :visited son mutuamente excluyentes, de forma que un mismo enlace no puede estar en los dos estados de forma simultánea.
Como los navegadores muestran por defecto los enlaces de color azul y los enlaces visitados de color morado, es habitual modificar los estilos para adaptarlos a la guía de estilo del sitio web:
a:link { color: red; }
a:visited { color: green; }3.4.3. Las pseudo-clases :hover, :active y :focus
Las pseudo-clases :hover, :active y :focus permiten al diseñador web variar los estilos de un elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y :visited que sólo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar a cualquier elemento.
A continuación se indican las acciones del usuario que activan cada pseudo-clase:
:hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un elemento.:active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento. El estilo se aplica durante un espacio de tiempo prácticamente imperceptible, ya que sólo dura desde que el usuario pulsa el botón del ratón hasta que lo suelta.:focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos<input>de los formularios cuando están activados y por tanto, se puede escribir directamente en esos campos.
De las definiciones anteriores se desprende que un mismo elemento puede verse afectado por varias pseudo-clases diferentes de forma simultánea. Cuando se pulsa por ejemplo un enlace que fue visitado previamente, al enlace le afectan las pseudo-clases :visited, :hover y :active.
Debido a esta característica y al comportamiento en cascada de los estilos CSS, es importante cuidar el orden en el que se establecen las diferentes pseudo-clases. El siguiente ejemplo muestra el único orden correcto para establecer las cuatro pseudo-clases principales en un enlace:
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }Los navegadores obsoletos como Internet Explorer 6 y sus versiones anteriores no son capaces de aplicar estas pseudo-clases a los elementos que no sean enlaces.
Por último, también es posible aplicar estilos combinando varias pseudo-clases compatibles entre sí. La siguiente regla CSS por ejemplo sólo se aplica a aquellos enlaces que están seleccionados y en los que el usuario pasa el ratón por encima:
a:focus:hover { ... }3.4.4. La pseudo-clase :lang
La pseudo-clase :lang se emplea para seleccionar elementos en función de su idioma. Los navegadores utilizan los atributos lang, las etiquetas <meta> y la información de la respuesta del servidor para determinar el idioma de cada elemento.
Si se considera el siguiente ejemplo:
p { color: blue; }
p:lang(es) { color: red; }Los párrafos del ejemplo anterior se ven de color azul, salvo los párrafos cuyo contenido esté escrito en español, que se ven de color rojo.
Como los navegadores actuales no son capaces de inferir el idioma de un elemento a partir de su contenido, el uso de esta clase está muy limitado salvo que la página utilice de forma explícita los atributos lang:
<p lang="en">Lorem ipsum dolor sit amet...</p>
<div lang="fr">
<p>Lorem ipsum dolor sit amet...</p>
<p lang="es_ES">Lorem ipsum dolor sit amet...</p>
</div>
<p lang="en">Lorem ipsum dolor sit amet...</p>
<ul>
<li lang="fr">Lorem ipsum dolor sit amet...</li>
</ul>La pseudo-clase :lang(xx) es muy diferente al selector de atributos [lang|=xx], tal y como muestran las siguientes reglas:
*[lang|=es] { ... } /* selector de atributo */
*:lang(es) { ... } /* pseudo-clase */
<body lang="es">
<p>Lorem ipsum dolor sit amet...</p>
</body>El selector *[lang|=es] selecciona todos los elementos de la página que tengan un atributo llamado lang cuyo valor empiece por es. En el ejemplo anterior, solamente el elemento <body> cumple con la condición del selector.
Por otra parte, el selector *:lang(es) selecciona todos los elementos de la página cuyo idioma sea el español, sin tener en cuenta el método empleado por el navegador para averiguar el idioma de cada elemento. En este caso, tanto el elemento <body> como el elemento <p> cumplen esta condición.