Selectores CSS. Avanzados

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 de avanzados 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 ver esta 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 único div (Felicia) que a su vez es hijo directo de otro div (Daniel).

Si no hubiéramos usado el símbolo de hijo (>) y hubiéramos escrito la regla directamente como div div {background:black; color:white;} (selector descendente simple) se habrían cambiado los fondos de TODOS los div que hubiera dentro del primer div (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 un span, ni en el caso del ejemplo ni en este último supuesto.

---

Para ver otro ejemplo ahora buscamos span que sean hijos directos de algún div.

(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 un span contenido en un div (Adolfo) pero no es hijo directo suyo. Si Felicia fuera un span 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 único div 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 dos div consecutivos no implica que el estido de div + 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 segundo div.


¿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 único div hermano adjunto a un span 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

• Selectores básicos
  • Universal
  • Etiqueta
  • Clase
  • ID
  • Descendente
  • Combinado
• Selectores avanzados
  • Hijos
  • Adyacentes

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter