Selectores avanzados
Conocer todos los selectores de CSS es necesario para crear diseños web profesionales. El estándar de CSS 2.1 incluye diferentes tipos de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.
Utilizando solo los cinco selectores básicos de CSS 2.1 (universal, de tipo, descendente, de clase y de id) antes mencionados es posible diseñar cualquier página web. No obstante, los selectores avanzados de CSS 2.1 y los nuevos selectores CSS 3 nos permiten ir un paso más y simplificar las reglas CSS y también el código HTML.
Los principales selectores son:
Agrupación de selectores ,
En muchas ocasiones tenemos varios bloques CSS diferentes con los mismos estilos, esto no es bueno ya que esto hará que el documento CSS ocupe más y por lo tanto, tarde más en descargarse.
Una buena práctica es ahorrar texto y simplificar nuestro documento CSS lo máximo posible, por lo que podemos hacer uso de la agrupación CSS. Esto se consigue cololando los selectores juntos pero separados por una coma (,). De esta forma, podemos pasar de tener el ejemplo-1, a tener el ejemplo-2, que es totalmente equivalente.
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { font-size: 80%; }
Esto puede parecer poco importante a priori, pero a medida que avanzamos con nuestros diseños, los documentos CSS se hacen muy grandes y difíciles de mantener, por lo que cuanto más sencillo sea, mejor.
Selector de Descendientes
En CSS podemos utilizar lo que se llama el selector descendiente (o descendente), que no es más que una forma de seleccionar ciertos elementos que están dentro de otros elementos.
Su sintaxis se basa en colocar los elementos uno a continuación de otro, separados por un espacio en blanco ( ).
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { font-size: 80%; }
Selector de Hijos >
Aunque el selector descendiente es muy util, nos puede interesar hacer la misma operación, pero en lugar de seleccionar todos los elementos descendientes, seleccionar sólo los hijos directos de un determinado elemento, descartando así nietos y sucesivos.
Su sintaxis se basa en colocar los elementos uno a continuación de otro, separados por el signo de mayor que (>).
/* El estilo se aplica solo a los elementos "p" hijos
directos de los elementos "div" */
div > p { font-size: 80%; }
Selector de Hermano adyacente +
Es posible también seleccionar al elemento hermano y seguido de otro, es decir, aquel con el mismo padre que está inmediatamente después, esto es, que está justo a continuación y al mismo nivel.
Su sintaxis se basa en colocar los elementos uno a continuación de otro, separados por el signo más (+).
/* El estilo se aplica solo al elemento "p" hermano
adyacente de los elementos "h3" */
h3 + p { color: # red; }
Selector de Hermanos generales
Es posible también seleccionar a todos los hermanos de un elemento y que están después que él, es decir, todos aquellos con el mismo padre que están a continuación, sin necesidad de que sean adyacentes.
Su sintaxis se basa en colocar los elementos uno a continuación de otro, separados por el signo virgulilla (~).
/* El estilo se aplica a todos los elementos "p" hermanos
de los elementos "h3" que estén después de él */
h3 ~ p { color: # red; }
Selector de Atributos [ ]
Una característica interesante de CSS es la posibilidad de aplicar estilos dependiendo del contenido de ciertos atributos de los elementos HTML. Existen varios formatos de atributos, derivados de las expresiones regulares:
- Exite un determinado atributo [alt]
- Tiene un atributo con un valor de texto igual a ... [href="#"]
- Tiene un atributo que contiene un texto [class*="item"]
- Tiene un atributo que empieza por... [class^="icon-"]
- Tiene un atributo que termina en... [class$=".pdf"]
Pseudo-clases :
Existen varias pseudoclases que permiten hacer referencias a los elementos del documento HTML según su posición y estructura de los elementos hijos.
- :first-child ➙ Primer elemento hijo (de cualquier tipo).
- :last-child ➙ Último elemento hijo (de cualquier tipo).
- :firts-of-type ➙ Primer elemento hijo (de igual tipo).
- :last-of-type ➙ Último elemento hijo (de igual tipo).
- :nth-child(n) ➙ n-elemento hijo (de cualquier tipo).
- :nth-last-child(n) ➙ n-hijo (de cualquier tipo) empezando desde el final.
- :nth-of-type(n) ➙ n-elemento hijo (de igual tipo).
- :nth-last-of-type(n) ➙ n-hijo (de igual tipo) empezando desde el final.
- :only-child ➙ Elemento que es hijo único (de cualquier tipo).
- :only-of-type ➙ Elemento que es hijo único (de igual tipo).
- :empty ➙ Elemento vacío (sin hijos, ni texto).
- :not() ➙ Todos los que no son...
Pseudo-elementos ::
Los pseudoelementos son otra de las características de CSS que permiten hacer referencias a comportamientos virtuales no tangibles que no tienen relación directa con el contenido del documento en sí.
La sintaxis de los pseudoelementos es colocar antes dos puntos dobles (::) para diferenciarlos de las pseudoclases, las cuales sólo tienen dos puntos (:). Aunque, este cambio surgió a partir de CSS3, por lo que aún es frecuente ver pseudoelementos con la sintaxis de pseudoclase con solo :.
Los dos más importantes y utilizados son ::before y ::after y es necesario añadir la propiedad content para que funcionen (aunque esté vacía).
- ::before ➙ Aplica los estilos antes del elemento indicado.
- ::after ➙ Aplica los estilos después del elemento indicado.
- ::first-letter ➙ Aplica los estilos en la primera letra del texto.
- ::first-line ➙ Aplica los estilos en la primera línea del texto.
Nota: hay más pseudoelementos no soportados todavía por todos los navegadores.
q::before {
content: "«";
color:#888
}
q::before {
content: "»";
color:#888
}