comparte el articulo 

Uso de selectores CSS, Parte I

Actualizado el 30/08/2011 < > 0 Comentarios

Resumen: Estudiamos el uso correcto de selectores, abarcando en esta primera parte los selectores de tipo básico.

En el mundo del diseño web donde todo gira alrededor de la información y el contenido, todos piensan estar a la vanguardia, o peor aún piensan saber todo sobre un tema y no creen necesario el refinar dicho conocimiento. Debemos aprender a reconocer cuando hay que expandir nuestro conocimiento, aún cuando sean cosas tan simples y sencillas que son consideradas las bases de nuestro trabajo.

Como ya se ha mencionado antes, sin una base sólida todo cae, es por eso que tenemos que echar un vistazo a nuestras costumbres y manera de programar, hacer un auto análisis y darnos cuenta si realmente estamos aprovechando el potencial que nos ofrece la programación web.

Optimicemos nuestro CSS

Veamos un ejemplo básico, la creación y mantenimiento de estilos en un sitio Web. Las hojas de estilo CSS forman una parte fundamental de cualquier sitio web en la actualidad, no podemos pensar en un sitio sin imaginar el código de estilo que lo mantiene, todo mediante etiquetas y sentencias que le dan color, un alineado o una mejor presentación a nuestro contenido.

Sí, quizás desde hace mucho tiempo atrás, como principiante en CSS, aprendiste lo que era un identificador, una clase o un selector de elementos descendientes, quizás eso no representa mayor reto para ti y dominas su uso a diestra y siniestra, pero te has puesto a pensar que existen muchos más tipos de selectores que muy probablemente representen una mejor solución para algunos de tus problemas al momento de maquetar una web.

Si únicamente has basado tu desarrollo en estos tres elementos te estás perdiendo de la enorme flexibilidad que nos ofrece CSS. Es por ello que en este artículo trataremos de desplegar los selectores de más ayuda al momento de desarrollar estilos con CSS.

Selectores básicos CSS

Como ya mencionamos existen selectores básicos en CSS los cuales son el sustento de cada día de un maquetador que esté trabajando en un estilo. Los principales selectores son los llamados identificadores, a los cuales mencionaremos como IDs, y las clases, conocidas como Class en el idioma inglés.

Los IDs se pueden reconocer por tener un símbolo de almohadilla o numeral antes del nombre, que es el signo que se escribe #, por lo que si en una hoja de estilo queremos aplicar una sentencia a un elemento cuya etiqueta luce algo así:

<div id="soyUnDiv"></div>

Tendremos que llamar a un selector como este “#soyUnDiv”. Los identificadores son rígidos y no permiten reusarse, por lo que el estilo que definamos para este selector únicamente será aplicado al elemento que cuenta con ese ID, si queremos aplicar un estilo para dos o más elementos entonces tendremos que usar una Clase.

Una class puede ser identificada por tener el símbolo de punto antes del nombre, por lo que un selector como “.somosDivs” nos traerá a todos los elementos que cuentan con esa clase entre sus atributos. Por ejemplo, supongamos que tenemos un conjunto de capas que comparten la clase mencionada:

<div class="somosDivs" id="div1">Div 1</div>
<div class="somosDivs" id="div2">Div 2</div>
<div class="somosDivs" id="div3">Div 3</div>

El estilo de estas capas puede ser modificado de manera grupal al llamar las clases o de manera individual llamando cada identificador.

Selector por elementos

El uso del nombre del elemento como selector es uno de los ejemplos más básicos en esta cuestión, simplemente con colocar el nombre de un tipo de elemento seguido de alguna sentencia de estilo, nos permite aplicar dicha alteración a todos los elementos que pertenezcan a ese grupo.

En lugar de tener que dar una clase a todos los elementos en el código HTML, o peor aún hacer un selector con todos los IDs de los elementos de interés, debemos mantener simples nuestros selectores y utilizar el nombre del elemento.

Selectores descendientes CSS

Otros selectores CSS muy comunes y sin duda básicos para el desarrollo, son los selectores de tipo descendiente, si bien su uso no puede ser tan constante como es el caso del ID y la clase, son fundamentales al momento de hacer aplicaciones. Su estructura consiste básicamente en colocar un selector enseguida de otro, para aumentar la especificidad.

Su uso se produce cuando necesitamos ser más específicos, por ejemplo si en lugar de querer seleccionar todos los elementos de tipo “link” que existen en el DOM, únicamente quisiéramos los “links” que pertenezcan a una lista entonces usaríamos un selector como este “li a”, ya que con eso indicamos que los elementos “a” tienen que ser descendientes de un elemento “li” para que puedan ser seleccionados.

Publicado el 30/08/2011, última actualización 30/08/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Paginas Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras