Selectores en CSS3: Selectores de tipo

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

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.

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

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.

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.

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