Apuntes de clase

Clase 12 · Combinadores descendientes

Hasta ahora poníamos una clase a cada elemento. Con los selectores descendientes declaramos una única clase en el contenedor y actuamos sobre sus hijos escribiendo .clase etiqueta. Después vemos :nth-child() para elegir un hijo concreto, los pares y los impares.

Descargar PDF

01 · Selectores descendientes

Una clase por elemento

Hasta ahora creamos una clase por cada elemento al que queremos dar propiedades:

style.css

.content{
  background-color: aqua;
  padding: 16px;
}

.foto{width:80px;}

.title{
  color: rgb(20, 137, 221);
  font-size: 24px;
}

.text{
  color: rgb(20, 137, 221);
  font-size: 24px;
}

index.html

<div class="content">
  <img class="foto" src="imagen.png">
  <h1 class="title">SEARCH</h1>
  <p class="text">Busca un término...</p>
</div>

Resultado

SEARCH

Busca un término...

<div>  → .content
  <img> → .foto
  <h1>  → .title
  <p>   → .text

01 · Selectores descendientes

Selectores descendientes

Podemos declarar una única clase css que afecte a diversos objetos descendentemente (hijos), dejando un espacio entre la clase y el elemento sobre el que queremos actuar.

style.css

.content{
  background-color: aqua;
  padding: 16px;
}

.content img{width:80px;}

.content h1{
  color: rgb(20, 137, 221);
  font-size: 24px;
}

.content p{
  color: rgb(20, 137, 221);
  font-size: 24px;
}

index.html

<div class="content">
  <img src="imagen.png">
  <h1>SEARCH</h1>
  <p>Busca un término...</p>
</div>

Resultado: el mismo aspecto con una sola clase

SEARCH

Busca un término...

<div>  → .content
  <img>
  <h1>
  <p>

01 · Selectores descendientes

Ventajas y límites

Qué ganamos en el HTML y en el CSS, y una advertencia importante.

Html

Nos permite escribir menos clases y poder ver un html más legible.

Css

Creamos la misma clase por cada elemento que queramos actuar; a diferencia de antes, el nombre de la clase es el mismo y solo cambia el elemento que sigue a la clase.

¡¡¡ Esto solo sirve para elementos descendientes que están dentro del contenedor principal, que es quien tiene la clase.

01 · Selectores descendientes

Afectando a todas las etiquetas descendientes

En este caso, cuando declaramos .content h1 va a afectar a todas las etiquetas <h1> que tengamos dentro del contenedor, en este caso 2 etiquetas.

style.css

.content{
  background-color: aqua;
  padding: 16px;
}

.content img{width:80px;}

.content h1{
  color: rgb(20, 137, 221);
  font-size: 24px;
}

.content p{
  color: rgb(20, 137, 221);
  font-size: 24px;
}

index.html

<div class="content">
  <img src="imagen.png">
  <h1>SEARCH</h1>
  <p>Busca un término...</p>
  <hr>
  <img src="imagen.png">
  <h1>SEARCH</h1>
  <p>Busca un término...</p>
  <hr>
</div>

Resultado

SEARCH

Busca un término...

SEARCH

Busca un término...

<div>
  <img>
  <h1>
  <p>
  <hr>
  <img>
  <h1>
  <p>
  <hr>

02 · nth-child( )

nth-child( ): elegir un hijo

Para especificar a qué elemento hijo queremos afectar. Si por ejemplo tenemos varios <h1> y queremos indicar que el segundo tenga un color diferente, se lo indicamos mediante la pseudoclase :nth-child(número de elemento a seleccionar);

En el ejemplo vamos a asignar un color diferente a los elementos 6 y 7 que tenemos dentro del contenedor. Lo traduciremos como el hijo n.º 6 y n.º 7.

style.css

.content :nth-child(6), :nth-child(7){
  color: red;
}

index.html

<div class="content">
  <img src="imagen.svg">
  <h1>Seach</h1>
  <p>Busca un termino...</p>
  <hr>
  <img src="imagen.svg">
  <h1>Seach</h1>
  <p>Busca un termino...</p>
  <hr>
</div>

Resultado

SEARCH

Busca un término...

SEARCH

Busca un término...

<div>
1<img>
2<h1>
3<p>
4<hr>
5<img>
6<h1> ←
7<p> ←
8<hr>

Separamos por comas para aplicar los mismos valores a varios hijos.

02 · nth-child( )

nth-child( ): seleccionar pares e impares

Con odd y even (o con una fórmula) elegimos los hijos pares o impares.

Pares
nth-child(2n); o podemos utilizar también nth-child(even);

Pares
nth-child(2n+1); o podemos utilizar también nth-child(odd);

style.css

.content :nth-child(odd){
  background-color: red;
}

.content :nth-child(even){
  background-color: yellow;
}

index.html

<div class="content">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Resultado

Impares (1, 3, 5, 7) → nth-child(odd) · Pares (2, 4, 6) → nth-child(even)

03 · Resumen

Resumen

Selector	Qué hace	Ejemplo
Descendiente	Afecta a todas las etiquetas indicadas que estén dentro del contenedor (separadas por un espacio).	`.content h1`
`:nth-child(n)`	Afecta al hijo que ocupa la posición `n`. Varios hijos se separan por comas.	`.content :nth-child(6), :nth-child(7)`
`:nth-child(odd)` / `(2n+1)`	Hijos impares.	`.content :nth-child(odd)`
`:nth-child(even)` / `(2n)`	Hijos pares.	`.content :nth-child(even)`