martes, 19 de febrero de 2013

HTML5: Selectores CSS 1

Pese a la variedad de selectores que tenemos disponibles en los CSS en HTML5 se han añadido algunos más. Aprovecharé para repasar los más importantes y ver cuales son las principales novedades en esta nueva versión.






Para ver los selectores más comunes voy a usar esta página web de prueba
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p id="p1">Esto es un parráfo y dentro hay un enlace a <a id="link1" class="a1" href="http://www.bing.com">Bing</a> y otro a <a id="link2" class="a1" href="http://www.google.es">Google</a></p>
<p id="p2">Tambien podemos tener un listado de idiomas</p>
<ul id="list1">
    <li>Inglés</li>
    <li>Español</li>
    <li>Frances</li>
    <li>Alemán</li>
    <li>Italiano</li>
</ul>
El aspecto que tiene este ejemplo en Google Chrome (tengamos en cuenta que cada navegador aplica unos estilos por defecto, por lo que este ejemplo se puede ver de diferente manera según el navegador que estemos usando).

Selector universal
Se aplica sobre todo los elementos del documento, y donde se utiliza el * como selector. Por ejemplo
* { color: #008080; }
Cambiaría el color de todos los elementos de nuestra página. El resultado es el siguiente
Un ejemplo más práctico relacionado con este selector está relacionado con los estilos que traen por defecto los navegadores. Cada navegador define un margin y un padding por defecto para cada elemento de nuestra página. Esto puede dar algún que otro quebradero de cabeza a la hora de maquetar nuestra página, así que buena costumbre es resetear los estilos por defecto. Una versión simplificada de esto podría ser lo siguiente (haciendo referencia al margin y el padding).
* { margin: 0; padding: 0 }
Con esto nuestra página tendría el siguiente aspecto
Selector por tipo
Mediante este selector podemos cambiar el estilo de un elemento (en base a su tipo) de nuestra página sin afectar a los demás. Por ejemplo, podemos cambiar el color color de nuestros enlaces o de los textos de nuestros párrafos. En nuestro caso vamos cambiar el color de todos los idiomas.
li { color: #00bfff; }
Y nuestra página tendría el siguiente aspecto
Selector por clase o identificador
Puede que no queramos aplicar el mismo estilo a todos los elementos del mismo tipo. Para eso podemos seleccionar el o los elementos a los que aplicar el estilo en base a la clase (especificada mediante el atributo class) o en base a su identificador (especificado mediante el atributo id).
.a1 { color: red; }
#p2 { color: greenyellow; }
En este caso estamos cambiado el color de los elementos con la clase a1 y el idenficador p2. Podríamos afinar más combinando el selector de tipo y el de clase (o el de id). La forma de hacerlo sería la siguiente
a.a1 { color: red; } 
p#p2 { color: greenyellow; }
Obteniendo el mismo resultado en ambos ejemplos
Selector por atributo
Podemos también seleccionar los elementos en base a si tiene un atributo o incluso si ese atributo tiene un valor determinado. Por ejemplo podemos seleccionar aquellos enlaces que tengan el atributo href definir (todos en nuestro caso)
[href] { color: #8b0000; }
En los condicionales que podemos usar con este selector encontramos la primera novedad en CSS3. Creo que el siguiente listado queda todo más claro.
  • [attr]: Selecciona un elemento si contiene el atributo attr independientemente el valor que tenga.
  • [attr="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor es val.
  • [attr^="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor comienza por val.
  • [attr$="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor termina por val.
  • [attr*="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor contiene el valor val.
  • [attr~="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor contiene varios valores pero uno es val.
  • [attr|="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor contiene una lista de valores separados por el carácter - y cuyo primer valor es val.
Los elementos en cursiva son las novedades introducidas en HTML5. Viendo un ejemplo de uno de ellos, podríamos seleccionar aquellos elementos que tuvieran una clase que empezara por a
[class^="a"] { color: #228b22; }
Combinando selectores
Si queremos aplicar el mismo estilo en varios selectores podemos hacerlo de la siguiente manera
a, li { color: #228b22; }
De esta forma estamos aplicando el mismo estilo a todos los enlaces y elementos de la lista.
Descendientes
También podemos seleccionar elementos en base a su padre. Podemos seleccionar descendientes de primer nivel o de cualquier nivel inferior. La forma hacerlo es la siguiente de seleccionar cualquier descendiente es la siguiente
p a { color: #00ced1; }
Y la forma de seleccionar solo los descendiente directos se hace de la siguiente forma
p > a { color: #00ced1; }
En ambos ejemplos estamos seleccionando los enlaces que sean descendientes de un párrafo.
Sibling
Otro selector que tenemos a nuestro alcance es el selector de sibling (selector de hermanos). Esto nos permite seleccionar uno o varios elementos en base a otro elemento que se encuentra a su mismo nivel.
Por ejemplo en este caso
h2 + p { color: #2f4f4f; }
Estamos seleccionado los párrafos que se encuentren inmediatamente después de un h2.
En este otro caso estamos seleccionado todos los párrafos que se encuentren después de un h2, inmediatamente después o no (este selector también ha sido introducido en la especificación de HTML5)
h2 ~ p { color: #2f4f4f; }
Y con esto termina esta introducción a los selectores que tenemos disponibles en los CSS. Para la próxima entrada dejaremos los selectores denominados pseudo clases que también son bastante útiles a la hora de hacer nuestros estilos.

Happy coding!

No hay comentarios:

Publicar un comentario