Selectores en CSS3: Selectores de hijos

Selectores en CSS3: pseudo-clases de estado
Selectores en CSS3: Selectores de tipo
Selectores en CSS3: Selectores de hijos

En CSS3 se aumentan el número de selectores. Estas opciones permiten una selección de elementos más precisa ya que permiten basarse en la posición del documento, el valor de los atributos e incluso si tienen hijos. En este post trataré los selectores de hijos.

Para los selectores hijo se seleccionan según el tipo de elemento. Para este caso vamos a partir de un código HTML.

<div>
   <p>Este el hijo 1</p>
   <p>Este el hijo 2</p>
   <blockquote>Este el hijo 3</blockquote>
   <p>Este el hijo 4</p>
   <p>Este el hijo 5</p>
</div>

<div>

</div>

Selectores de primer y último hijo

Para seleccionar el primer y último hijo se usan los selectores :first-child y :last-child respectivamente. Si quisiéramos seleccionar el primer hijo del <div> y que sea un <p>

div p:first-child{
  color:blue;
}

div p:first-child{

color:blue;

}

y para el último

div p:last-child{
  color:blue;
}

div p:last-child{

color:blue;

}

Como el div tiene un blockquote como hijo podríamos cambiar el elemento <p> por este y seleccionaría el primer blockquote que encuentre.

Selectores de N hijos

Estos selectores permiten seleccionar un hijo o varios si vamos a por los pares o impares. Tiene 2 sentidos, uno sería empezando con el primero mediante el selector :nth-of-type(n).

Partiendo del ejemplo anterior, supongamos que quiero seleccionar el 2º hijo.

div p:nth-child(2){
  color:blue;
}

div p:nth-child(2){

color:blue;

}

Si se pusiera 3 no seleccionaría el 3º <p> estaría seleccionando el blockquote pero al no ser <p>, el estilo no se vería aplicado. Se tiene más en cuenta la posición del elemento que el tipo de hijo.

Sin embargo, de usar el selector de la siguiente manera

div *:nth-child(3){
  color:blue;
}

div *:nth-child(3){

color:blue;

}

Seleccionaría al blockquote ya que ocupa la 3º posición y el selector no tiene en cuenta que tipo de hijo al usar el *.

Para seleccionar aquellos hijos que sean pares hay pasar el parámetro even y el parámetro odd para impares. También se tiene en cuenta el tipo de elemento seleccionado.

div p:nth-child(even)
  color:blue;
}

div p:nth-child(even)

color:blue;

}

div p:nth-child(odd)
  color:blue;
}

div p:nth-child(odd)

color:blue;

}

Con :nth-last-child se empezaría por el final, en este caso se seleccionaría el 2º párrafo empezando por el final.

div p:nth-last-child(2)
  color:blue;
}

div p:nth-last-child(2)

color:blue;

}

Selector de elementos de hijo único

CSS3 permite seleccionar aquellos hijos que no tienen ningún hermano. En otras palabras solo se seleccionaría aquellos elementos que son hijos únicos. El selector para ellos es :only child. Vamos a modificar un poco el HTML.

<div>
 <p>Este el hijo 1</p>
</div>

<div>
 <p>Este el hijo 2</p>
 <blockquote>Este el hijo 3</blockquote>
 <p>Este el hijo 4</p>
 <p>Este el hijo 5</p>
</div>

<div>

</div>

<div>

</div>

Con esta regla sólo se seleccionaría el primer p ya que es el único hijo del div.

div p:only-child{
  color:blue;
}

div p:only-child{

color:blue;

}

Selector empty

También hay la posibilidad de seleccionar aquellos elementos que no tengan hijos. Para eso se emplea :empty. Esta pseudo-clase no sólo tiene en cuenta los elementos como hijos sino también el texto esto quiere decir que no se podría aplicar los p, al menos los de este ejemplo. Por ello, voy a modificarlo un poco.

<div>
   <p></p>
   <p>Este el hijo 2</p>
</div>

<div>

<p></p>

</div>

Ahora el p que está completamente vacío tendrá un borde azul y un poco de alto.

p:empty {
   border: 1px solid blue;
   height: 50px;
}

p:empty {

border: 1px solid blue;

height: 50px;

}

Y hasta aquí los selectores de hijos en CSS3, espero que os haya servido de ayuda. A seguir picando 😉