Selectores CSS (Parte 2)
5 minutos de lectura
Fecha: 15/1/2015
Esta es la segunda parte de la entrada Selectores CSS (si quieres ver la primera pulsa aquí), y continuamos donde lo habiamos dejado en los selectores que nos permiten recorrer el arbol DOM, es decir, que a partir de un elemento podremos acceder a otros en función de la posición que tengan respecto a este.
En su mayoria estos selectores son nuevos para nosotros porque los han incorporado en CSS3 así que es posible que no los conozcamos, vayamos viendo cuales son y como funcionan.
Selectores por posición
(X + Y) Selector adyacente
ul + p{
font-style:italic;
}
Aplica solamente al elemento (y) que es inmediatamente precedido por el primer elemento (x). En éste caso, solo el primer párrafo después de cada elemento ul tendrá texto en cursiva, las siguientes etiquetas p no.
(X > Y) Selector de hijos directos
Como acabas de leer afecta a todos los hijos, solo afecta a los hijos directos, es decir a los que en el arbol DOM estan solamente un nivel por debajo, si lo que buscaramos es que afectara a todos los hijos da igual en que nivel estuvieran entonces en vez usar (X > Y) usariamos (X Y).
Leido de esta manera parece un poco abstracto, veamos un ejemplo, yo tengo el siguiente codigo CSS.
div#container > ul{
color:green;
}
Y este código HTML…
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
Fijaros en que hay 4 etiquetas ul (2 de apertura y 2 de cierre), pero una cuelga o esta a continuacion del div con id «container» mientras que la otra cuelga de un elemento li.
¿Que elementos tendran la letra de color verde?
Pues las li que ponen List Item que son las que pertenecen al ul que cuelga del div («hijo directo»), y NO el li que pone child porque pertenece al ul que cuelga de otro li y no directamente del div.
(X ~ Y) Selector de hermanos
Se dice que un elemento es hermano de otro cuando estan al mismo nivel es decir cuando ambos cuelgan del mismo elemento. Si recordais antes hablabamos del selector adyacente (x + y) pues para que nos entendamos el adyacente coge el elemento hermano que esta al lado (coge el primero y solamente coge uno), por contra el selector de hermanos se refiere a TODOS los elementos que sean hermanos y no solo al primero.
Volviendo al mismo ejemplo que teniamos en el adyacente
ul ~ p{
font-style:italic;
}
Con esto lo que consigo es que cualquier parrafo que este despues de una etiqueta ul tenga la letra cursiva.
- Estos 3 selectores de posicion junto con los 2 selectores de elemento que vimos en el primer post son los que permiten acceder a los elementos nombrandolos y luego navegando de unos a otros, pero tambien hay una serie de selectores que afectan a la posicion que ocupa un elemento de forma especifica, veamos cuales son.
X:first-child
Actua sobre el elemento que nosotros definimos cuando este sea el primer hijo de un conjunto.
ul li:first-child{
font-weight:bold;
}
Con este estilo le digo que el primer elemento de la lista estará en negrita.
X:last-child
ul li:last-child{
font-weight:bold;
}
En este caso será el ultimo elemento de la lista el que estará en negrita, lo que tenemos que tener en cuenta de estos 2 selectores (first-child y last-child) es que solo actuan sobre 1 elemento y este necesariamente es el primero o el último, si queremos acceder al resto de ellos estan los selectores que explico a continuación.
X:nth-child(n)
Donde X: es el elemento sobre el que actua y n es el numero que indica su posicion especifica, vamos a ver 2 ejemplos…
<div id="container">
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
<p>Soy el primer parrafo</p>
<p>Soy el segundo parrafo</p>
<p>Soy el tercer parrafo</p>
</div>
Y ahora le aplico estos estilos
li:nth-child(4){
color:red;
}
p:nth-child(1){
color:blue;
}
Con esto me pintaria de color rojo la letra de solamente el cuarto elemento li y de azul solamente el primer parrafo.
X:nth-last-child(n)
Mira el ejemplo de arriba y piensa esto es exactamente lo mismo solo que empezando a contar desde el final, por tanto los mismo estilos que antes con este selector quedan asi…
li:nth-last-child(4){
color:red;
}
p:nth-last-child(1){
color:blue;
}
Y en esta caso pintaria de color rojo la letra de solamente el segundo elemento li (que es el cuarto empezando a contar por el final) y de azul solamente el ultimo parrafo (que es el primero empezando a contar por el final).
X:nth-of-type(n)
Este selector es como los anteriores con la diferencia de que X: no actua como si fuera hijo, actua como si fuera hermano.
X:nth-last-of-type(n)
Al igual que antes este empieza a contar desde el final los elementos hermanos…
Selectores por condición
Estos son los selectores que se activan cuando se cumple una condición, es decir cuando el elemento tiene alguna carácteristica.
X:empty
La condicion que en este caso se ha de cumplir es que el elemento en cuestion este completamente vacio, y esto implica que no contiene elementos hijos y que tampoco tiene ningun contenido de texto.
Un caso de esto seria un etiqueta <ul></ul> o una etiqueta <p></p>, ambas estan completamente vacias pero nos podria interesar darles algun estilo especial…
X:not(selector)
Una de las ultimas incorporaciones, y que con toda seguridad vamos a usar hasta que nos cansemos, esta asociado a otro selector, y aplica los estilos que contiene cuando el elemento al que hace referencia no es ese selector o no esta incluido dentro de ese selector, expliquemos ambos casos:
- Cuando no es ese selector
:not(p) {
font-size:18px;
}
Cuando NO sea el selector «p» el tamaño de la fuente será de 18px, es decir aplica a todos los elementos de la página que no sean párrafos.
- Cuando el elemento no esta incluido dentro de ese selector
div:not(#miContenido) {
font-size:16px;
}
Cuando el elemento «div» NO sea el selector «#miContenido» el tamaño de la fuente será de 16px, es decir aplica a todos los elementos div de la pagina que no tengan el id miContenido y a todos los elementos que contengan.