Parte N 3° | Selectores Css
Un selector es la parte de un estilo CSS donde se indica sobre que parte del documento (X)HTML se debe aplicar el estilo, resumiendo, se podría decir que es el nombre del estilo, ejemplo:
dijo:div { font-size: 18px; }
En la anterior regla el selector seria div y para ser un poco mas técnicos, font-size sería el atributo o propiedad y 18px el valor, a su vez estos dos últimos junto con las corchetas de inicio y cierre serían la declaración (Recuerdalo a lo largo de este artículo).
Tras esta pequeña info... Disponemos de diferentes tipos de selectores que como es obvio actúan de forma diferente: Selectores, Selectores Descendientes, Selectores Hermano Adyacentes, Selectores de Atributos, Selectores de clases, Selectores de Id y Selectores Hijo... Explicamos cada uno y ponemos un ejemplo.
Pero antes de empezar y para los usuarios mas novatos, sería conveniente entender el concepto de Elemento Padre y Elemento Hijo si ya lo conoces saltate este párrafo. Cuando hablo de elemento me refiero a una etiqueta (X)HTML como pueda ser span o div por lo que si le buscas la lógica el padre es la etiqueta principal que dentro de ella tiene otras etiquetas, por ejemplo body siempre será un padre y en un código como el siguiente:
dijo:<div><strong>Velozmente sucedio lo inesperado...<strong></div>
El padre sería div y strong el hijo puesto que strong está dentro de div. A su vez un hijo puede tener otros hijos y así de forma jerárquica.
Selectores
Simplemente selectores, es lo más básico y que ya se ha insinuado al inicio del artículo. Los selectores hacen referencia a etiquetas de nuestro documento (X)HTML tal y como se ha mostrado en el primero ejemplo de selector:
dijo:div { font-size: 18px; }
Esto indicaría que todos los elementos div de nuestro documento (X)HTML utilizarían el estilo marcado por este código (tamaño de letra a 18px).
Selectores Descendientes
Este selector afectaría a una etiqueta hijo de un padre de forma descendiente:
dijo:div span { font-size: 18px; }
Por lo que todos los elementos span de nuestro documento (X)HTML que estén dentro de un elemento div se verán afectados por esta regla. Vemos un ejemplo:
dijo:<head><style type="text/css">
div span { font-size: 18px; }
</style></head>
<body>
<span>Velozmente sucedio lo inesperado... </span>
<div><span>Y el perro se subio por la montaña</span></div>
</body>
Observarás como en el resultado se ven dos frases, una con tamaño normal y otra (la segunda) con un tamaño de 18px
Selectores hermano Adyacentes
Quizá sea el tipo de selector menos utilizando pero vamos a verlo... A diferencia de otros selectores este no se aplica ni a padres ni a hijos sino a hermanos.
dijo:h5 + h6 { font-size: 18px; }
Esta regla afectaría únicamente a h6 pero solo cuando este se encontrara inmediatamente después de un h5 o cuando h5 y h6 sean hijos del mismo padre. Vemos un ejemplo:
dijo:<head> <style type="text/css">
h5 + h6 {font-size:18px}
</style> </head>
<body>
<h5>Velozmente sucedio lo inesperado...</h5>
<h6>Y el perro se subio por la montaña</h6>
</body>
Efectivamente h6 aparecerá con letra de 18 pixeles pero si entre h5 y h6 colocamos algún otro elemento como un párrafo p el selector hermano "adyacente" dejará de aplicarse a h6.
Selectores de Atributos
Otro selector que al igual que el anterior no tiene un uso muy extendido entre los programadores web pero la funcionalidad de este selector puede ser incuestionable en determinados casos. Los selectores de Atributo se aplican generalmente a etiquetas img o a aunque no tiene porque... y se aplican las reglas con referencia a los atributos (alt, title, target...) de estos elementos.
dijo:img[widht] { border: 5px dotted #f00 }
La anterior regla se aplicaría a todos los elementos img de nuestro documento que tengan el atributo width... aún podemos ir mas lejos:
dijo:img[widht="80"] { border: 5px dotted #f00 }
Como estarás suponiendo, esta otra regla afectará a las etiquetas img que tengan el atributo width con un valor de 80px/pt/em/%... Pero el poder de este selector aun llega mas allá!
dijo:img[alt~="gato"] { border: 5px dotted #f00 }
Tenemos el símbolo ~ (Alt Gr + 4) el cual indica que se aplicará la regla en aquellos elementos img que tenga un atributo alt y que en el valor de este atributo exista la palabra indicada entre una serie de palabras separadas por espacios:
dijo:<head><style type="text/css">
img[alt~="perro"] {border: 5px solid #000;}
</style>
</head>
<body>
<img src="imagen.jpg" alt="Y el perro se subió por la montaña" />
</body>
¿No es fantástico CSS? cada día lo llevo mas en el corazón... Pero no nos despistemos... el selector de atributos aun puede ofrecernos otra función cambiando el simbolo ~ por
dijo:*[lang|="es"] {border: 5px solid #000;}
Mediante el asterisco hacemos que la arregla se aplique a todos los elementos de nuestro documento, seguidamente indicamos que debe estar el atributo lang y que su valor debe empezar por es seguido de un guión medio (-)... Esto es practico cuando hacemos referencias a lenguajes de la forma es-es, es-ar, es-mx... (se usa en webs que se preocupan por la accesibilidad)
Selectores de Clase y de Id
Para finalizar agrupamos estos dos selectores en la misma descripción puesto que son prácticamente iguales con una única y considerable diferencia que ahora comentaremos. Quizá sean estos los selectores que mas conocen los webmasters y que mas uso tienen.
El selector de clase se aplica a elementos utilizando el atributo class, los selectores de clase utilizan nombres genéricos que no están relacionadas con las etiquetas (X)HTML al contrario que todos los selectores vistos anteriormente... El selector de ID también recibe un nombre genérico y se aplica a los elementos (X)HTML mediante el atributo id, la diferencia con el selector de clase es que en un documento (X)HTML Valido! no podemos tener dos elementos con el mismo id mientras que podemos tener todos los elementos que queramos con el mismo class por lo que el selector de id se usa en lugares únicos de nuestra web como pueda ser la cabecera, el copyright... etc, aunque eso se queda en tus manos! Vemos un par de ejemplos con estos selectores
Selector de Clase:
dijo:<head><style type="text/css">
.elgato { color:#F00; }
</style></head>
<body>
<div class="elperro" >Y el perro se subió por la montaña</div>
</body>
Selector de ID:
dijo:<head><style type="text/css">
#elgato { color:#F00; }
</style></head>
<body>
<div id="elperro" >Y el perro se subio por la montaña</div>
</body>
Fíjate como en el selector de clase utilizamos un punto (.) antes de poner el nombre del selector y en el selector de Id colocamos una almohadilla (#).