CSS3: Selectores, Clases y Pseudo-Clases
Por @Dorex89
Conocer y dominar todos los selectores, clases y pseudo-clases de CSS es imprescindible para crear diseños web profesionales. El estándar de CSS 3 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.
Selector de hijo (Child Selector)
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el “signo de mayor que” (>).
Mientras que en el selector descendente sólo importa que un elemento esté dentro de otro, independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe ser hijo directo de otro elemento.
<p> span { color: blue; }
<p>
<span>Texto1</span>
</p>
<p>
<a href="#">
<span>Texto2</span>
</a>
</p>
En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.
Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector descendente y el selector de hijos:
p a { color: red; }
p > a { color: red; }
<p>
<a href="#">Enlace1</a>
</p>
<p>
<span>
<a href="#">Enlace2</a>
</span>
</p>
El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a los dos enlaces.
El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo de un elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.
El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento padre es el mismo) y están seguidos en el código HTML. Este selector emplea en su sintaxis el símbolo +. Si se considera el siguiente ejemplo:
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
- Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:
- El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos<h2> cumplen la primera condición del selector adyacente.
- El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.
Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.
El siguiente ejemplo puede ser útil para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }
En muchos libros es habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. El selector p + p selecciona todos los párrafos que están dentro de un mismo elemento padre y que estén precedidos por otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.
El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento padre debe ser el mismo. Si se considera el siguiente ejemplo:
p + p { color: red; }
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
En el ejemplo anterior, solamente el segundo párrafo se ve de color rojo, ya que:
-El primer párrafo no va precedido de ningún otro párrafo, por lo que no cumple una de las condiciones de p + p
• El segundo párrafo va precedido de otro párrafo y los dos comparten el mismo padre, por lo que se cumplen las dos condiciones del selector p + p y el párrafo muestra su texto de color rojo.
• El tercer párrafo se encuentra dentro de un elemento <div>, por lo que no se cumple ninguna condición del selector p + p ya que ni va precedido de un párrafo ni comparte padre con ningún otro párrafo.
Selector de atributos
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementosHTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
- [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
- [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor.
- [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
- [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
A continuación se muestran algunos ejemplos de estos tipos de selectores:
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { ... }
/* Selecciona todos los elementos de la página cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }
Pseudo-clases
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.
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 :link se aplica a todos los enlaces que todavía no han sido visitados por el usuario.
- La pseudo-clase :visited se 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; }
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 { … }
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.
Pseudo-elementos
Los selectores de CSS, las pseudo-clases y todos los elementos HTML no son suficientes para poder aplicar estilos a algunos elementos especiales. Si se desea por ejemplo cambiar el estilo de la primera línea de texto de un elemento, no es posible hacerlo con las utilidades anteriores.
La primera línea del texto normalmente es variable porque el usuario puede aumentar y disminuir la ventana del navegador, puede disponer de más o menos resolución en su monitor y también puede aumentar o disminuir el tamaño de letra del texto.
La única forma de poder seleccionar estos elementos especiales es mediante los pseudo-elementos definidos porCSS para este propósito.
El pseudo-elemento :first-line
El pseudo-elemento :first-line permite seleccionar la primera línea de texto de un elemento. Así, la siguiente regla CSS muestra en mayúsculas la primera línea de cada párrafo:
p:first-line { text-transform: uppercase; }
Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos avanzados:
div:first-line { color: red; }
p:first-line { text-transform: uppercase; }
<div>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
En el ejemplo anterior, la primera línea del primer párrafo también es la primera línea del elemento <div>, por lo que se le aplican las dos reglas CSS y su texto se ve en mayúsculas y de color rojo.
El pseudo-elemento :first-letter
El pseudo-elemento :first-letter permite seleccionar la primera letra de la primera línea de texto de un elemento. De esta forma, la siguiente regla CSS muestra en mayúsculas la primera letra del texto de cada párrafo:
p:first-letter { text-transform: uppercase; }
Los signos de puntuación y los caracteres como las comillas que se encuentran antes y después de la primera letra también se ven afectados por este pseudo-elemento.
Este pseudo-elemento sólo se puede utilizar con los elementos de bloque y las celdas de datos de las tablas.
Los pseudo-elementos :before y :after
Los pseudo-elementos :before y :after se utilizan en combinación con la propiedad content de CSS para añadir contenidos antes o después del contenido original de un elemento.
Las siguientes reglas CSS añaden el texto Capítulo - delante de cada título de sección <h1> y el carácter . detrás de cada párrafo de la página:
h1:before { content: “Capítulo - “; }
p:after { content: “.”; }
El contenido insertado mediante los pseudo-elementos :before y :after se tiene en cuenta en los otros pseudo-elementos :first-line y :first-letter.
Selectores de CSS 3
La futura versión CSS 3 incluye todos los selectores de CSS 2.1 y añade otras decenas de selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su explicación detallada se puede encontrar en el
En primer lugar, CSS 3 añade tres nuevos selectores de atributos:
Elemento[atributo^=”valor”], selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
Elemento[atributo$=”valor”], selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
Elemento[atributo*=”valor”], selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:
/* Selecciona todos los enlaces que apuntan a una dirección de correo electrónico */
a[href^="mailto:"] { ... }
/* Selecciona todos los enlaces que apuntan a una página HTML */
a[href$=".html"] { ... }
/* Selecciona todos los títulos h1 cuyo atributo title contenga la palabra "capítulo" */
h1[title*="capítulo"] { ... }
Otro de los nuevos selectores de CSS 3 es el “selector general de elementos hermanos”, que generaliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y selecciona el elemento2 que es hermano de elemento1y se encuentra detrás en el código HTML. En el selector adyacente la condición adicional era que los dos elementos debían estar uno detrás de otro en el código HTML, mientras que ahora la única condición es que uno esté detrás de otro.
Si se considera el siguiente ejemplo:
h1 + h2 { ... } /* selector adyacente */
h1 ~ h2 { ... } /* selector general de hermanos */
<h1>...</h1>
<h2>...</h2>
<p>...</p>
<div>
<h2>...</h2>
</div>
<h2>...</h2>
El primer selector (h1 + h2) sólo selecciona el primer elemento <h2> de la página, ya que es el único que cumple que es hermano de <h1> y se encuentra justo detrás en el código HTML. Por su parte, el segundo selector (h1 ~ h2) selecciona todos los elementos <h2> de la página salvo el segundo. Aunque el segundo <h2> se encuentra detrás de<h1> en el código HTML, no son elementos hermanos porque no tienen el mismo elemento padre.
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se utilizan :: en vez de: delante del nombre de cada pseudo-elemento:
::first-line, selecciona la primera línea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
::selecion, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.
Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se añaden 12 nuevas, entre las cuales se encuentran:
Elemento:nth-child(numero), selecciona el elemento indicado pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un elemento, el quinto elemento de una lista, etc.
- elemento:nth-last-child(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
- elemento:empty, selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
- elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que sean respectivamente los primeros o últimos hijos de su elemento padre.
- elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
- elemento:nth-last-of-type(numero), idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas para realizar selecciones avanzadas:
li:nth-child(2n+1) { … } /* selecciona todos los elementos impares de una lista */
li:nth-child(2n) { … } /* selecciona todos los elementos pares de una lista */
/* Las siguientes reglas alternan cuatro estilos diferentes para los párrafos */
p:nth-child(4n+1) { ... }
p:nth-child(4n+2) { ... }
p:nth-child(4n+3) { ... }
p:nth-child(4n+4) { ... }
Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen la posición de las imágenes en función de la posición de la imagen anterior:
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
Otro de los nuevos selectores que incluirá CSS 3 es :not(), que se puede utilizar para seleccionar todos los elementos que no cumplen con la condición de un selector:
:not(p) { … } /* selecciona todos los elementos de la página que no sean párrafos */
:not(#especial) { … } /* selecciona cualquier elemento cuyo atributo id no sea “especial” */
Aunque todavía faltan muchos años hasta que la versión CSS 3 sustituya a la actual versión CSS 2.1, los navegadores que más se preocupan por los estándares (Opera, Safari y Firefox) incluyen soporte para varios o casi todos los selectores de CSS 3.
Existe una herramienta llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se hace la prueba.
Links de Ayuda/Practicas:
-
yucazos ha publicado esto
