Selectores – hojas de estilo
Selectores
Como ya habíamos comentado, los selectores son los elementos HTML o tags de HTML a los que se les dará el formato para que la página web tenga el diseño correcto dependiendo de lo que queremos proyectar.
Se pueden tener estos selectores:
- Selector universal
- Selector de tipo o etiqueta
- Selector descendente
- Selector de clase
- Selector de ID
- Combinación de selectores básicos
Selector universar
Este selecciona todos los elementos de la página. Se representa por un asterisco (*). Este selector casi no se utiliza por la razón de ser universal ya muy pocas veces se aplica el mismo estilo a todos los elementos de una página. Sin embargo, se puede combinar con otros selectores.
Ejemplo:
* {color: green; }
Selector de tipo o etiqueta
Este selecciona los elementos de la página que coincidan con el selector en cuestión.
sinxtaxis
tag_html { propiedades; } (sin los simbolos de mayor y menor que <>)
Ejemplo:
h1 {color: red; }
De igual manera, si un selector coincide con las mismas propiedades, estos se pueden agrupar mediante un coma (,)
Ejemplo:
h1, h2, h3 {color: black; }
Si los selectores nada más comparten una sola propiedad pero no de los demás, se puede compartir usando la opción del ejemplo anterior y volver a declarar estos tags con las propiedades que no comparten.
Ejemplo:
h1, h2, h3 {color: black; }
h1 {font-size: 6px; }
h2 {font-size: 8px; }
h3 {font-size: 10px; }
De esta forma nos ahorramos de escribir color:black en las siguientes líneas.
Selector descendente
Estos selecionan los elementos que se encuentran dentro de otros elementos.
Ejemplo:
p span {color: yellow; }
Esto hace que se seleccionen todos los elementos en la página web que están dentro de <span> pero que a su vez se encuentre dentro del elemento <p>
Esta regla se usaría de la siguiente forma dentro de la programación HTML
<p><span>Aquí insertamos el texto </span><p>
A los elementos <span> que NO esten dentro de la etiqueta <p> no se aplicará la regla CSS.
Los selectores descendentes pueden tener tantos descententes como quiera uno
tag1 tag2 tag3 .... tagn
Hay que diferenciar que los elementos agrupados llevan por separación una coma (,) a diferencia de los selectores descendientes que no llevan ningun coma, sin embargo, se separan con un espacio.
Selector de clase
Este selector ayuda cuando queremos que solamente una línea de nuestro parrafo tenga un formato diferente a los demás, sin embargo no podemos utilizar el selector descendente por que la regla podría no ayudarnos a hacer lo que queremos. En este caso usamos el selector de clase.
Sintaxis:
.nombre_tag { propiedades; }
El selector que precede al punto (.) se interpreta como cualquier elemento dentro de la página cuyo atributo class sea igual al nombre del selector.
Ejemplo:
.referencia {color: red; font-size: 10px; }
Código HTML
<div>Inserte un texto aquí </div>
También es posible combinar o restringuir el alcance del selector de clase de la siguiente manera:
div.referencia {color: red; font-size: 10px; }
Código HTML
<div class="referencia"> Inserte un texto aquí </div>
De esta forma, la regla aplica unicamente a aquellos elementos de tipo <div> que tengan como atributo class con el valor referencia
Hay que tomar en cuenta las diferencias:
div .referencia {color: red; font-size: 10px}
Esto es todos los elementos con atributo=”referencia” que esten dentro de cualquier elemento de tipo <div> De igual forma, se puede usar así:
.referencia.error {color: blue; font-size: 6px; }
Esto vale por todos aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y referencia.
Código HTML
<div class="error referencia" >Inserte un Texto aqui </div>
Selectores de ID
Este se usa parecido al de clase, sin embargo este es más eficiente. Este permite seleccionar un elemento de la página a través del valor de su atributo id. Este solo selecciona un elemento de la página porque el valor del atributo id no puede repetir en dos elementos diferentes de una misma página. Aqui se usa el sharp (#) en vez del punto (.)
Sintaxis
#nombre_tag {propiedades; }
Ejemplo
#error {color: red; }
Código HTML
<p>texto</p>
<p>texto2</p>
<p id="error">texto3</p>
Aquí, la aplicación de la regla será unicamente para texto3.
El selector ID es recomendable usarlo cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página.
En este caso también se puede restringir el alcance de la regla
p#error {color: red; }
Hay que darse cuenta, al igual que los selectores class de como
escribimos la regla:
p #error {color: red;}
Ya que esto es totalmente diferente
Combinación de selectores básicos
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS:
Ejemplos:
.xx1 .xx2 { propiedades }
La regla dice que se aplica las propiedades a todos aquellos elementos con class=”xx2″ unque se encuentren dentro de cualquier elemento con class=”xx1″
div.xx1 span.xx2 { propiedades }
El selector selecciona solo aquellos elementos de tipo <span> con un atributo class = “xx2″ que estén dentro de cualquier elemento de tipo <div> que tenga un atributo class=”xx1″
La combinación puede ser tan compleja como nosotros lo querramos:
ul#menuPrincipal li.destacado a#inicio { propiedades }
La regla CSS dice: hace referencia al enlace con un atributo id=”inicio” que se encuentra dentro de un elemento de tipo <li> con un atributo, que forma parte de una lista <ul> con un atributo id=”menuPrincipal”.
Y así se puede seguir combinando las veces que uno quiera
Tags: CSS, programacion, web
