Haciendo uso de los selectotes sencillos se pueden desarrollar casi cualquier diseño de paginas Web que deseemos, sin embargo existen otras maneras de usar los selectores para lograr simplificar el código CSS, imagínenos un caso en que queramos que todos los párrafos sean de un solo color, exceptuando el primer párrafo de todas las paginas, esto podría hacerse usando CSS en la línea, aplicándole estilo directamente al primer párrafo, pero tendría el inconveniente de tener que hacerlo con cada pagina nueva que quiera añadir, y si el sitio es grande seria demasiado tedioso, otra manera de hacerlo seria creando una clase especifica para identificar el primer párrafo, esto implicaría tener su selector en la hoja de estilo que se este usando y tendría que hacer referencia en el primer párrafo de todas las paginas a esta clase, lo cual recaería en casi las mismas complicaciones que usando CSS en la línea. Para simplificar este tipo de situaciones las hojas de estilo en cascada ofrecen una elegante solución, la utilización combinada de selectores y los selectotes avanzados, que se explican a continuación:
Combinación sencilla de selectores:
Cuando creamos una regla es posible hacer que esta solamente aplique sobre ciertos elementos, por ejemplo si queremos que los elementos de tabla que están dentro de un div específico tengan un color de fondo azul usaríamos el siguiente código:
Ejemplo 4.0:
#container table {
Background-color:blue;
}
Lo que se hizo en la regla anterior fue hacer una combinación sencilla de selectores, como puede notarse en primera instancia se colocó el selector de id que esta asociado a un elemento con ese id en el código HTML, supongamos que es un div, con esto indicamos que la regla será aplicada a este div, luego de un espacio se colocó el selector de tipo table, con esto decimos que la regla se aplica a las tablas, poniendo los dos selectores unidos para formar una combinación de selectores estamos haciendo que este bloque de declaraciones se aplique exclusivamente a las tablas que estén dentro del elemento div. Estas combinaciones se pueden hacer tan profundas como queramos, y se le pueden incluir todos los tipos de selectores.
Ejemplo 4.1:
#container table p .parrafoespecial{
Background-color:blue;
}
La regla de estilo anterior será aplicada únicamente a lo que esté dentro del div container, dentro de una tabla, que sea un párrafo y que sea de la clase “parrafoespecial”.
Agrupación de selectores separados por comas:
Si quisiéramos que un bloque de declaraciones apliquen sobre algunos elementos de nuestro código HTML por igual, podemos agrupar sus selectores y separarlos mediante comas de la siguiente manera:
Ejemplo 4.2:
#container, table, ul, p, .parrafoespecial{
Background-color:blue;
}
Este código es distinto al anterior, pues este lo que indica es que la declaración que contiene aplicara sobre el elemento con id container, sobre las tablas, sobre las listas (ul), sobre los párrafos, y sobre los elementos que pertenezcan a la clase párrafoespecial, independientemente si unos están dentro o fuera de los otros, el código anterior es equivalente a escribir:
Ejemplo 4.3:
#container {
Background-color:blue;
}
table {
Background-color:blue;
}
ul {
Background-color:blue;
}
p {
Background-color:blue;
}
.parrafoespecial{
Background-color:blue;
}
Puede notarse claramente que el primer código es sumamente más simple que el segundo.
Selectores avanzados
Los selectores avanzados no funcionan en el Internet Explorer 6 ni en versiones anteriores, por lo que no eran muy comunes hasta ahora, esta modalidad presenta algunas caracteristicas interesantes.
Selector de hijo:
Los selectores de hijos influllen unicamente sobre elementos que sean hijos directos de de otros, se utiliza el simbolo >, si se escribe a > b, se indica que b es hijo de a, e infulle solamente sobre los elementos b que sean desendientes directos de a.
Ejemplo 4.4:
La regla h1 > span { background:red; } Afecta a:<h1><span>texto del titulo</span></h1>
Porque el elemento span es desendiente directo de h1
Pero no afecta a: <h1><a href=”#”><span>texto del titulo</span><a></h1>
Porque span no es desendiente directo de h1, pues está dentro de otro elemento.
Selector adyacente:
Los selectores adyacentes se escriben así
Ejemplo 4.5:
a + b {
color:blue;
}
Esta regla será aplicada solo a los elementos b que cumplan; b debe ser hermano de a (estar dentro del mismo elemento) b esta dispuesto en el codigo HTML inmediatamente después de a.
Ejemplo 4.6:
h1 + h2 { color: red }<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
La regla solo aplica sobre el subtitulo, pues este es un elemento h2 hermano de h1 y declarado inmediatamente después de este. No aplica sobre Otro subtitulo, pues este elemento, aunque sea h2 y sea hermano de h1, no está directamente después de un h1.
Selector de atributos
Este es el ultimo tipo de selectores avanzados. Dan la posibilidad de seleccionar elementos html segun atributos o sus correspondientes valores
Estos selectores se pueden usar de cuatro formas:
[atributo]: selecciona a los elementos que tienen el atributo encerrado en los brakets.
Ejemplo 4.7
/*Muestra en rojo todos los elementos de parrafo "p" que tengan
el atributo style independientemente del valor*/
p[style]{
color: red;
}
[atributo=valor]: selecciona a los elementos que tienen el atributo encerrado en los brakets. con el valor especificado
Ejemplo 4.8
/*Muestra en azul todos los elementos de parrafo "p" que tengan
el atributo class con el valor articulo*/
p[class="articulo"]{
color: blue;
}
[atributo~=valor]: selecciona a los elementos que tienen el atributo encerrado en los brakets que tiene al menos uno de sus valores igual al especificado.
Ejemplo 4.9
/*Muestra en rojo todos los elementos de parrafo "p" que tengan el
atributo class y al menos uno se sus valores sea "articulo" */
p[class~="articulo"]{
color: red;
}
[atributo~=valor]: este selector solo es util para los atributos lang, ya que selecciona los elementos que tengan un atributo con un valor de palabras separadas con guiones con la primera palabra igual a valor
Ejemplo 4.10
/* pone en rojo todo lo que tenga el atributo
"lang" empezado por "es", es
tales como "es", "es-ES", "es-AR" y otros */
*[lang|="es"] {
color : red
}
