Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

CSS3 XIII

Selectores en CSS3

Nuevos tipos de selector

CSS3 incluye nuevos tipos de selector, y también nuevas pseudoclases para ser aplicadas con cualquier selector. La mayoría son bastante específicos y no suelen usarse normalmente, pero pueden en algunas ocasiones facilitarnos bastante el trabajo.

Selectores de atributo

En CSS2 conocemos ya los selectores de atributo. Estos permiten seleccionar un elemento en función del atributo que lleva y su valor:

[atributo="valor"]

Por ejemplo: [class="azul"] .

Esto seleccionará a todos los elementos que tengan el atributo class cuyo valor sea "azul".

Aún podemos especificar más poniendo delante del selector el nombre de la etiqueta:

div[class="amarillo"]

Aquí además de tener el atributo y valor class="amarillo" el elemento tiene que tener la etiqueta div.

Hasta aquí es lo que se puede hacer con CSS2, sin embargo CSS3 amplia este atributo, de manera que podemos hacer que no tenga que coincidir el valor entero sino parte del valor: siguiendo con el ejemplo anterior veamos estos atributos:

[class^="am"]

Al colocar el símbolo ^ delante del igual hace que se seleccionen todos los elementos con atributo class cuyo valor empiece por "am"

[class$="illo"]

Al colocar el símbolo $ delante del igual hace que se seleccionen todos los elementos con atributo class cuyo valor termine por "illo"

[class*="mar"]

Al colocar el símbolo * delante del igual hace que se seleccionen todos los elementos con atributo class cuyo valor contenga la cadena de texto "mar"

NOTA: el símbolo ^ se escribe pulsando a la vez la tecla del acento grave (del revés) y mayúsculas, y después un espacio.

Como en CSS2 también podemos poner delante el nombre de la etiqueta para especificar aún más.

a[href^="http://"] { color: red; }

Este ejemplo colorea de rojo todos los enlaces externos de la página.

Estos selectores son admitidos por todos los navegadores, incluido Internet Explorer. En resumen la sintaxis de estos selectores será la siguiente:

Coincide al principio: [atributo^="cadena"]

Coincide al final: [atributo$="cadena"]

Coincide en cualquier parte: [atributo*="cadena"]

En el siguiente enlace se muestra una página de ejemplo en el que se han utilizado estos selectores para crear el estilo.

Selectores de atributos.


Selector posterior general

etiqueta1~etiqueta2

Este selector selecciona todos los elementos de la "etiqueta2" que aparecen después de la "etiqueta1". por ejemplo:

#modo~p { background-color: yellow; }

todos los párrafos que estén después de la etiqueta con id="modo1" tendrán un fondo amarilllo, pero no los que estén antes de esta etiqueta.

Hay que tener en cuenta que el orden de aparición en la página puede no ser el mismo que el orden de aparición en el código, aquí el "después" se refiere al orden de aparición en el código.

El signo ~ se llama "tilde". Para escribirlo, en la mayoria de los teclados pulsaremos primero las teclas "altGr" y el "4" (teclado alfanumérico) a la vez, y después pulsamos la barra espaciadora.

En el siguiente enlace se muestra una página de ejemplo en el que se ha utilizado este selector .

Selector posterior general.


pseudoclases

Las pseudoclases son modificaciones en el comportamiento normal de un selector, a veces dependiendo de su estado (como en los enlaces) y otras veces no. Por tanto escribimos siempre el nombre del selector, seguido de dos puntos, y el nombre de la pseudoclase:

selector:pseudoclase { ...}

En CSS2 aparecen las pseudoclases en los enlaces, y también en otros elementos, como párrafos y elementos de texto. En CSS3 se amplian a casi cualquier elemento, en muchas de estas pseudoclases se tienen en cuenta las condiciones de los elementos seleccionados respecto de sus elementos padre.

La gran mayoría de estas pseudoclases son admitidas por todos los navegadores. Aquí, mientras no digamos otra cosa, las pseudoclases que veremos a continuación son admitidas por todos los navegadores. Veamos ahora cuáles son estas pseudoclases:


:first-of-type

Esta pseudoclase selecciona el primer elemento de cada contenedor o elemento padre. por ejemplo:

p:first-of-type { color: blue; }

En esta regla el primer párrafo de cada bloque o contenedor tendrá la letra de color azul. Es decir si el párrafo es el primero dentro del contenedor o elemento padre se le aplicará la regla, y si no es así se ignorará.


:last-of-type

Esta pseudoclase selecciona el último elemento de cada contenedor o elemento padre: ejemplo:

p:last-of-type { color: red; }

Aqui el último párrafo de cada contenedor o elemento padre se verá con el texto en rojo, tal como indica la regla.

Tanto en esta pseudoclase como en la anterior, si queremos restringir el comportamiento a un sólo bloque o tipos de bloque, podemos utilizar el selector descendente para indicar a qué bloque se aplicará:

#capa1 p:last-of-type { color: red; }

Aquí se verá con el texto en rojo sólo el último párrafo del div id="capa1".


:only-of-type

Esta pseudoclase se aplica a aquellos elementos en los que dentro de su elemento padre sólo hay uno de su clase. Ejemplo:

p:only-of-type { color:green; }

El texto del párrafo se verá de color verde si dentro del contenedor (elemento padre) hay sólo un párrafo. Si en el contenedor hay más de un párrafo, la regla no le afecta.

En el siguiente enlace se puede ver un ejemplo en el que se han usado las tres pseudoclases anteriores.

Pseudoclases ... -of-type


:only-child

Esta pseudoclase se aplica a aquellos elementos que dentro de su elemento padre están solos, es decir que son "hijos únicos" y no tienen elementos "hermanos". Ejemplo:

p:only-child { background-color: yellow; }

El párrafo tendrá un color de fondo amarillo sólo si dentro de su contenedor o elemento padre no tiene ningún elemento más adyacente, es decir si es el único elemento que existe en su mismo nivel. Esta pseudoclase y las siguientes no son compatibles con Internet Explorer 8 o anterior. Si lo son con el resto de navegadores.

:nth-child(n)

Esta pseudoclase se aplica a aquel elemento que, dentro de su elemento padre, está en el orden indicado dentro del paréntesis. Es decir "n", (dentro del paréntesis) debe ser un número entero, y el elemento debe estar en el orden indicado en ese número para que el selector tenga efecto. Ejemplo:

p:nth-child(3) { background-color: lime; }

El selector afecta al tercer elemento de cada elemento padre siempre que éste sea un párrafo. Para establecer el orden se cuentan todos los elementos sean estos párrafos o no.

:nth-last-child(n)

Esta pseudoclase se aplica a aquel elemento que, dentro de su elemento padre, está en el orden indicado dentro del paréntesis, pero empezando a contar por el final. Es decir "n", (dentro del paréntesis) debe ser un número entero, y el elemento debe estar en el orden indicado en ese número, empezando a contar desde el final, para que el selector tenga efecto. Es como en la pseudoclase anterior, pero contando desde el final. Ejemplo:

p:nth-last-child(3) { background-color: silver; }

El selector afecta al tercer elemento de cada elemento padre, empezando a contar desde el final, siempre que éste sea un párrafo.

:nth-of-type(n)

Esta pseudoclase se aplica a aquel elemento que, dentro de su elemento padre, está en el orden indicado dentro del paréntesis , pero a diferencia del anterior aquí sólo se tienen en cuenta los elementos que pertenecen al tipo indicado en el selector, por ejemplo:

p:nth-type(3) { background-color: silver; }

El selector afecta al tercer párrafo de cada elemento padre. El elemento padre puede tener más elementos, pero para establecer el orden sólo se tienen en cuenta los párrafos.

:nth-last-of-type(n)

Esta pseudoclase es en todo igual a la anterior, salvo que el orden se empieza a contar desde el final.

p:last-of-type(3) { color: maroon; }

El selector afecta al tercer párrafo de cada elemento padre, empezando a contarlos desde el final. El elemento padre puede tener más elementos, pero para establecer el orden sólo se tienen en cuenta los párrafos.

:last-child

Esta pseudoclase selecciona a aquel elemento, que es el último dentro de su contenedor o elemento padre. siempre que éste sea del tipo indicado en el selector. Ejemplo:

p:last-child { color: green; }

La regla sólo se aplica si el párrafo es el último elemento de su contenedor.

Tal como se ha dicho, esta pseudoclase y las anteriores no son compatibles con Internet Explorer 8 y anteriores.

Veamos a continuación en el siguiente enlace una página con ejemplos aplicados de estas últimas pseudoclases:

Pseudoclases de "hijos"


:empty

Esta pseudoclase selecciona a aquellos elementos que están vacíos, es decir que no tienen contenido. Ejemplo:

p:empty { background-color: silver; width: 10px;height: 10px; }

El selector afecta a todos los párrafos que están vacíos de contenido, (<p></p>) y en este ejemplo dibuja un pequeño cuadrado de color gris claro. Esta pseudoclase no funciona en Internet Explorer 8 y anteriores.

:enabled y :disabled

Estas dos pseudoclases se aplican casi exclusivamente a elementos de formulario, y en concreto a los "input" de tipo "texto". Estas pseudoclases distinguen si estos elementos llevan el atributo disabled

La pseudoclase :enabled se aplica a aquellos elementos de formulario que no llevan este atributo, y no se aplica a los que lo llevan, mientras que la pseudoclase disabled se aplica a los elementos que están desactivados por llevar este atributo. Ejemplos:

input[type="text"]:enabled { color: marron; blackground-color: aqua; }

input[type="text"]:disabled { color: black; blackground-color: silver; }

En estos ejemplos los elementos input de texto cambian su aspecto, teniendo distinto aspecto si están activos que si no lo están. Estas pseudoclases no funcionan en Internet Explorer 8 o anteriores.

:checked

Esta pseudoclase se aplica casi exclusivamente a los elementos de formulario tipo "input" que son botones para elegir, es decir los botones tipo "radio" y los botones tipo "checkbox". Cambian el aspecto del botón cuando está seleccionado. por ejemplo:

input:checked { background-color: yellow; color: red; }

Esta pseudoclase funciona sólamente en el navegador Opera. En el ejemplo anterior veremos al ser seleccionado el fondo del botón en amarillo, y el punto o dibujo que lo activa en rojo.

::selection

Aunque tiene forma de pseudoclase es realmente un selector, ya que no se aplica a ningún elemento sino directamente, y afecta al elemento o elementos que seleccionemos en la página, normalmente con un doble o triple click del ratón. Ejemplo:

::selection { background-color: aqua; color: maroon; }

Al seleccionar un elemento en la mayoría de los navegadores el aspecto de éste es de un fondo azul y las lettras blancas. Mediante este selector cambiamos ese aspecto. En el ejemplo anterior al seleccionarlo veremos un fondo azul claro y letras marrones.

Este selector funciona en todos los navegadores excepto en Internet-Explorer, aunque en Firefox está de forma experimental y debemos poner el prefijo ::-moz-selection.

Veamos a continuación en el siguiente enlace una página con ejemplos aplicados de estas últimas pseudoclases:

Pseudoclases III







Aquí acaba este manual de novedades en CSS3. Nos hemos dejado una novedad importante, que son las animaciones, que por la extensión del tema le dedicamos otro manual en este mismo sitio.



Manual CSS3

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo