Selectores CSS
Una de las confusiones que se suele presentarse a la hora de diseñar CSS es saber la diferencia entre los distintos selectores. CSS cuenta con los siguientes
Veamos exactamente que es un selector:
[css]p { font-size: 12px; }[/css]
Esto se denomina una regla CSS. p es un selector y lo que se encuentra dentro de los paréntesis es una declaración (puede haber más de una declaración). Una declaración está formada por dos elementos: propiedad y valor; la propiedad en éste caso sería font-size y el valor sería 12px.
El selector de tipo, índica que se apliquen las declaraciones a todas las etiquetas del documento. Este selector es el menos restrictivo
Por ejemplo:
[css]h4 { color: blue; }[/css]
Aplicado al siguiente código html
[html]
soy un h4
soy otro h4
¡Somos todos del mismo color!
[/html]
Salida
Como se puede ver en la salida sólo se aplico el estilo a todas las etiquetas que coincidieron con el selector.
En el siguiente ejemplo aplicaremos el mismo estilo a dos etiquetas, CSS nos ayuda a simplificar la notación, para no definir dos veces las mismas declaraciones.
[css]strong, em{color:green;}[/css]
Notar que los selectores están separados por coma
que lo aplicaremos a
[html]
Soy un strong verde
soy em verde y también un strong verde
[/html]
Salida:
Con esto logramos que todas las etiquetas strong y em en la página tengan el mismo estilo.
Los selectores descendentes sólo aplica las declaraciones cuando coincide el selector y el anidamiento de etiquetas especificado. Veamos un ejemplo para aclarar las cosas
[css]p strong {color:red;}[/css]
Notar que los selectores están separados por espacios
Y tengamos el siguiente código HTML
[html]
Tengo una parte strongpero ¡no es rojo!
Sólo dentro de mi es rojo
[/html]
Salida
No se aplico el estilo en h5, porque el selector descendente especifica que el estilo se aplique dentro de p, o sea se aplica el estilo al selector más a la izquierda y que se encuentre contenido en el selector de la derecha. Sólo dentro p cumple con el anidamiento especificado en el selector de descendencia.
A través de los selectores de clase podemos referenciar etiquetas especificas de la página que no lo podríamos lograr con los anteriores selectores. Una situación sería la siguiente:
Marcar con amarillos 3 etiquetas strong. Donde por lo menos una deben encontrarse dentro de cualquier etiqueta.
En está situación no podemos usar los selectores de tipo, ya que nos indica que sólo marquemos 3 strong, ni los selectores de descendencia porque los encabezados se pueden encontrar dentro de cualquier etiqueta.
Para solucionar dicha situación deberemos definir un selector de clase, estos se aplican a todas las etiquetas con el valor del atributo class igual al selector. Un mismo elemento puede tener una o más class.
[css].amarillo{color:yellow;}[/css]
Notar el signo punto al inicio del selector
Que aplicaremos al siguiente código
[html]
Tengo un strong pero no es amarillo
Tengo un strong y es amarillo
puedo ser amarillo en cualquier parte
Falta un ultimo strong
[/html]
La salida sería
Con el selector de clase podemos aplicar el estilo a una o más etiquetas determinadas.
Y por último tenemos el selector de ID, cumple la misma función que el selector de clase. Pero para aplicar dicho estilo se utiliza el atributo id de las etiquetas. Veamos como se define
[css]#unico{color:#6947a7}[/css]
Notar el signo almohadilla al inicio del selector
Y lo aplicamos en el siguiente código
[html]
soy el único strong de la página con este color
No puedo ser de ese color
Tampoco lo puedo ser
[/html]
Salida
Como se puede ver, estos dos selectores se comportan de manera muy parecida ¿Cuál es entonces la diferencia entre un selector de clase y uno de id? La diferencia es sútil y radica en que un selector de clase puede aparecer una o más veces en una misma página, en cambio un selector de ID sólo puede aparecer una sóla vez en la página, debido a que se utiliza el atributo id de la etiqueta, y en una misma página no pueden haber dos etiquetas con el mismo valor de id. Por lo tanto el selector de ID se utiliza para que aparezca una vez en la página, por ejemplo definir el estilo de la etiqueta body; por el contrario el selector de clase aparece varias veces en la misma página, como vimos en el ejemplo de los tres encabezados.
Esto cuatros selectores pueden combinarse entre sí y dar una amplia variedad de forma de especificar elementos en los documentos. Les dejo un último ejemplo para mostrarles lo muy complejo que se puede volver una notación de selectores
[css]
p#directo strong.especial em a#video { … }
[/css]
Las declaraciones se aplicarán sólo a un link que tenga el valor id igual a video y que se encuentre dentro de un elemento em, que a su vez se encuentre dentro de un elemento strong con el atributo class igual a especial, el cual se encuentra dentro de un elemento p con el atributo id igual a directo.