Selectores en CSS3: Selectores de tipo

CSS

Selectores en CSS3

Entre las numerosas novedades en cuanto selectores en CSS3, en este post voy a tratar de los selectores de tipo. Aunque estos selectores permiten seleccionar elementos según su tipo, deben ser hijo de algún elemento.

Voy a partir de un ejemplo similar al del post anterior

XHTML
1
2
3
4
5
6
7
8
9
<div>
   <p>Este el hijo 1</p>
   <p>Este el hijo 2</p>
</div>
<div>
   <blockquote>Este el hijo 3</blockquote>
   <p>Este el hijo 4</p>
   <p>Este el hijo 5</p>
</div>

Selectores de primero y último tipo

El selector :first-of-type seleccionaría el primer elemento que hay dentro de un contenedor y sea del tipo especificado.

CSS
1
2
3
p:first-of-type{
  color:blue;
}

Sin embargo, con :last-of-type seleccionaría el último elemento que hay dentro de un contenedor de un tipo de elemento.

CSS
1
2
3
p:last-of-type{
  color:blue;
}

Selectores de N tipo

Como sucede con los selectores hijos, se puede seleccionar un tipo de elemento de una posición concreta contando desde arriba, :nth-of-type, o contando desde el final :nth-last-of-type. Si la posición seleccionada no hay ningún elemento del tipo especificado, no se le aplicaría el estilo. Las posiciones van en función del número de hijo y no al número de tipos.

CSS
1
2
3
p:nth-of-type(1){
  color:blue;
}

CSS
1
2
3
p:nth-last-of-type(2){
  color:blue;
}

Selector de un elemento único

El selector :only-of-type selecciona aquellos elementos que sean el único tipo dentro de un contenedor sin importar cuantos hijos tenga.

CSS
1
2
3
blockquote:only-of-type{
  color:blue;
}

Y hasta aquí los selectores de tipo, espero que os sirva de ayuda. A seguir picando 🙂