Selectores CSS. Avanzados – Seguro – Motor

El otro día nos quedamos por los selectores descendentes como si la cosa acabara ahí, pero realmente todos los selectores CSS combinados pueden recibir este mismo adjetivo de descendentes.

En efecto, combinando selectores siempre podemos buscar determinado selector B que esté contenido dentro de otro A para darle estilo (a él y a todos los que estén dentro de A) pero no podemos darle estilo sólo al A que a su vez tenga dentro un selector B concreto. No podemos ir hacia arriba por así decirlo.

Si aplicamos reglas a A, estas serán para todos los elementos que tengan ese selector y no podremos discriminar en función de si A tiene dentro B, C, D o cualquier otra cosa. Por eso insisto en que CSS siempre es descendente.

Pero aún así las posibilidades son muchas más de las que vimos en el anterior post. Hoy por ejemplo vamos a ver cómo discriminar selectores (hacia abajo) siguiendo una especie de árbol genialógico, para poder seleccionar determinados hermanos, hijos, nietos y demás familia.

Selectores avanzados CSS

Bien, pues como decía, con los selectores básicos se pueden hacer muchísimas cosas, pero con estos que veremos a continuación podremos resolver algunos problemas determinados que nos pueden surgir a la hora de atacar con CSS el elemento exacto que queremos modificar.

Que les haya puesto el adjetivo deavanzados sólo es una manera de clasificarlos para distinguirlos de los básicos, pues como veréis, no tienen mucha dificultad.

Sólo añadir que algunos de estos selectores no serán interpretados por todas las versiones de los navegadores actualmente en comercialización, aunque los de esta entrada son soportados por prácticamente todos incluido IE desde su versión 8.

Para más información podéis veresta tabla de compatibilidad.

Y para ver toda esta parte seguiré este esquema HTML cuyo código e interpretación son las siguientes:

div class="adolfo"
  Adolfo Div
  span class="beatriz"
    Beatriz Span
    span class="casildo"
      Casildo Span
    /span
    div class="daniel"
      Daniel Div
      div class="felicia"
        Felicia Div
      /div
    /div
    div class="eduardo"
      Eduardo Div
    /div
  /span
/div

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Selector de hijos

Selecciona todos los elementos (hijo) que están contenidos dentro de otros (padre), pero sólo si son hijos directos, es decir, si no hay otras cajas distintas por en medio. Se utiliza un símbolo entre los selectores simples.

En los descendentes, una vez el elemento cumpla con el selector, todos los otros elementos que haya dentro de él, sea a la altura del "árbol genialógico" que sea, quedaban también afectados por las mismas reglas, pero con este tipo de selector sólo los hijos se verán modificados por las propiedades declaradas. El resto de familia (hermanos, nietos, bisnietos, etc.) del elemento que cumpla -por así decirlo- la condición, no quedarán afectados.

Por tanto las diferencias son dos. Una está en el matiz que aporta la palabra "directo", porque sólo se seleccionará el hijo del par padre-hijo que cumpla lo declarado. Serían como familiares en primer grado descendentes, por lo que no afectaría a un par con mayor grado de separación (padre-nieto, por ejemplo).

Pero como puedo ser más confuso con mis palabras que esclarecedor, ahí va un ejemplo...

(Aplicar a los div que sean hijos directos de otro div un fondo negro y un color de fuente blanco)

div div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Como se puede ver, sólo se cambia el fondo del únicodiv (Felicia) que a su vez es hijo directo de otrodiv (Daniel).

Si no hubiéramos usado el símbolo de hijo () y hubiéramos escrito la regla directamente comodiv div {background:black; color:white;} (selector descendente simple) se habrían cambiado los fondos de TODOS losdiv que hubiera dentro del primerdiv (Adolfo) aún sin ser directos. Esto es Daniel, Eduardo y Felicia. Lo vemos.

(Aplicar a todos los div que estén contenidos dentro de otro div un fondo negro y un color de fuente blanco)

div div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Beatriz y Casildo no cambiarían de fondo en ningún caso por ser unspan, ni en el caso del ejemplo ni en este último supuesto.

Para ver otro ejemplo ahora buscamosspan que sean hijos directos de algúndiv.

(Aplicar a los span que sean hijos directos de algún div un fondo negro y un color de fuente blanco)

div span {background:black; color:white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Beatriz es la única caja que cumple la condición porque por ejemplo Casildo es unspan contenido en undiv (Adolfo) pero no es hijo directo suyo. Si Felicia fuera unspan también cumpliría la condición y su fondo sería negro.

Selector adyacente

Sirve para seleccionar un único elemento que es consecutivo de otro. Ni descendiente directo ni más abajo en el anidamiento, sino a la misma "altura" y justo detrás, sin otros elementos en medio. Para ello se utiliza el símbolo+ entre dos selectores.

En este caso buscamos hermanos y además siameses.

(Aplicar a los div que sean justo precedidos por otro div y por ningún otro tipo de elemento)

div + div { background: black; color: white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

¿Y cual era el único elemento en el ejemplo que cumplía la condición? Pues eso... Eduardo es el únicodiv precedido (que no dentro) de otro div. Felicia está DENTRO de Daniel y no a la misma altura, por lo que como no son hermanos sino padre e hijo, la regla no le afecta.

E insistiendo en la idea de que CSS sólo se puede usar en sentido descendente el hecho de que haya dosdiv consecutivos no implica que el estido dediv + div se vaya a aplicar a ambos. Como veis sólo se aplica al selector que queda más a la derecha en el selector combinado, el segundodiv.

¿Imaginais que sucederá si usamos esto otro?

(Aplicar a los div que sean justo precedidos por un span y por ningún otro tipo de elemento)

span + div {background:black; color:white;}

Adolfo DivBeatriz SpanCasildo Span

Daniel Div

Felicia Div

Eduardo Div

Exacto. En ese caso se cambia de color el fondo de Daniel porque es el únicodiv hermano adjunto a unspan en nuestro esquema de ejemplo.

Nota: Los fondos de cada caja tienen forzado un color de fondo propio (blanco) para que no sea transparente (por defecto) y se vea con el mismo color que el de la caja contenedora.

Lo que sabemos sobre selectores CSS