SELECTORES CSS3


Además de HTML5, la web también avanza con su nueva versión del lenguaje de hoja de estilos, CSS3. Lo podemos utilizar con HTML5, pero también en páginas de HTML4, siempre que el navegador soporte las características de CSS3 que usemos.

En esta entrada vamos a revisar los nuevos selectores (técnicamente pseudo clases), con los que podemos separar mucho mejor el contenido de su estilo. El problema clásico a resolver con estos selectores es el de hacer una tabla con cebreado, es decir, que las filas pares sea de un color y las impares de otro. Con CSS2, esto había que hacerlo así:

<table>
     <tr class=”colorImpar”><td>1</td>  <td>2</td></tr>
     <tr class=”colorPar”><td>3</td><td>4</td></tr>
</table>

Teniendo en css las clases para colorPar y colorImpar que cambiasen el color de fondo. Como vemos en realidad estamos dando información de estilo en el HTML, ya que la distinción de par o impar solo lo usamos para cambiar el color. Además pensemos lo monótono que es dar esos valores de clase a una tabla con cientos de filas.

Con CSS3, esto lo podemos elegir en la hoja de estilos, por lo que en el HTML solo queda la información estructural de la tabla:

<table>
            <tr><td>1</td><td>2</td></tr>
            <tr><td>3</td><td>4</td></tr>
</table>

Y aquí es donde entran los nuevos selectores de CSS3, la hoja de estilo sería algo así:

tr:nth-of-type(even){
            background-color: #f0f0f0;
}

tr:nth-of-type(odd){
            background-color: #dddddd;
}


Que quedaría así:

12
34
Como vemos los selectores son una expresión tipo “:nombre(variable)”. Los selectores de selección más utilizados son:

:first-child es el primer elemento de un conjunto. Por ejemplo td:first-child sería la primera columna de una tabla (podemos hacer que toda la tabla tenga alineación derecha menos la primera columna), y p:first-child sería el primer párrafo (podríamos hacer que el primer párrafo de una noticia estuviera en negrita, como si fuera un sub-titular).
:last-child último elemento de un conjunto. Su uso es idéntico al de first-child, podríamos usarlo para dar un formato de pie al ultimo elemento de una lista (que sea un total, por ejemplo).
:nth-child(n) el enésimo elemento del conjunto que cumpla una regla. Aquí n sería como la i de un bucle que va de 0 al número de elementos. Podemos hacer cosas como :nth-child(n+2), todas las filas menos la primera, o :nth-child(5n+1) para que cada 5 filas tenga el mismo formato (por ejemplo si repetimos la cabecera de una tabla cada 5 filas). Es curioso que n comienza en 0, pero los elementos en uno. Por ejemplo en este 5n+1 estamos haciendo: (5x0+1)=1 (primer elemento), (5x1+1)=6 (sexto elemento)...
:nth-of-type(tipo) recorre todos los elementos de un determinado tipo. Tipo puede ser un tipo DOM, por ejemplo un img, así para dar estilo a todas las imágenes de un div sería #idDiv:nth-of-type(img). También podemos usar tipos especiales como pares o impares, tal y como hemos visto en el ejemplo de la tabla.
:first-of-type el primero del tipo que elijamos dentro del contenedor padre. Por ejemplo: #contenedor img:first-of-type daría estilo a la primera imagen del div #contenedor.
:empty no tiene elementos DOM hijos, ni texto. Sirve para dar formato a elementos vacíos. Por ejemplo si disponemos sitio en una web para un campo opcional que no se ha rellenado, podemos hacer que si no se rellenó no se muestre con un visibility:hidden directamente en css sin programar javascript ni php.


Además hay otras etiquetas similares que viendo las anteriores se entienden sin más explicación: :nth-last-child(), :nth-last-of-type(tipo), :last-of-type, :only child, :only-of-type.


Un ejemplo sencillo y útil de estos selectores sería una lista que vamos a usar como menú, donde queremos que el menú de inicio tenga otro color y espaciado a la izquierda.

Código HTML:

 <ul id=”menu”><li>Inicio</li><li>Noticias</li><li>Perfil</li><li>Contacto</li></ul>

Código CSS3:

#menu{
            list-style: none;
}

#menu li{
            background-color: #f0f0f0;
            padding: 10px;
            float: left;
}

#menu li:first-child{
            background-color: #dddddd;
}



             que tiene este aspecto:


             

            Estos selectores son soportados por la mayoría de navegadores desde versiones de hace varios años. Chrome 3, Firefox 3.5, Safari 4, Android 2, Opera 9 o 10 según que selector,... El único problema es que Internet Explorer no los ha incluido hasta la versión 9. Es css, solo hace que sea más bonito, así que los usuarios de IE 6, 7 y 8 podrán seguir usando la web, aunque no la vean tan bonita. Si nos importa mucho el acabado final para usuarios de IE podemos utilizar la librería DOMassistant, que hace que funcionen los selectores de CSS3, y poner un pequeño código para incluirla sin el navegador es un IE viejo (en la primera entrada de HTML5 ya se ve como hacerlo).