Css se forma por dos partes, una llamada selector y otra
llamada declaración, un ejemplo de ello sería: h1 { color: red; }, donde lo que
se encierra entre llaves es la declaración, es decir, lo que se pretende hacer
y la etiqueta h1 sería el selector, a lo que se le aplicaría la declaración.
En este apartado, nos centraremos más en los selectores,
próximamente se abordará el contenido de la declaración.
Los selectores básicos son: universal, etiqueta, de clase,
de id, descendente y combinando selectores.
- Universal: el selector es el asterisco “*” y sirve para seleccionar todos los elementos de la página.
- Etiqueta: selecciona todos los elementos cuya etiqueta HTML coincida con ésta, estos pueden ser: p, h1, div, etc.
- De clase: son selectores individuales formados por un nombre precedido por punto, es decir, si en un texto tenemos varios párrafos “<p>”, podemos nombrar a uno o varios de ellos de la siguiente manera: <p class=”parrafo”>, de esta manera el selector sería .parrafo y al cambiar las propiedades de la clase párrafo, se cambiarían exclusivamente a aquellas que ostentaran esta clase. De esta manera, se puede aplicar diferentes estilos a varios elementos diferentes.
- Id: el selector id es prácticamente igual al de clase, la diferencia es que para llamarlo sería con sostenido “#” seguido del nombre, por ejemplo, <p id=”parrafo”>, el selector sería #parrafo. La otra diferencia es que mientras el de clase se usa para varios elementos iguales o diferentes, éste es único, se debe emplear para un único elemento.
- Descendente: selecciona los elementos que se hallan dentro de otros elementos, por ejemplo, para seleccionar todos los elementos <span> que hay dentro de un párrafo <p>, sería de la siguiente manera: p span {}.
- Combinados: es similar al anterior, salvo que se puede complicar mucho más de manera que si establecemos como selectores a .parrafo .especial, el selector seleccionará los elementos de clase especial que se encuentran dentro de los elementos de clase parrafo. Pero se puede modificar y ser, por ejemplo, p.parrafo span.especial, de esta manera, el selector seleccionaría los span de clase especial que son contenidos por aquellos párrafos de clase parrafo.
Esto en cuanto a selectores básicos, ahora veremos los
selectores avanzados.
- Selector de hijos: similar al selector descendente, salvo que tiene que ser que el elemento que se selecciona debe estar justo debajo de otro elemento, de ahí que se conozca como selector hijo. Se representa con “>”, un ejemplo: p > span.
- Selector adyacente: es más complejo de explicar, aun así haya vamos. Este selector, sirve para seleccionar elementos que deben cumplir dos reglas, deben ser hermanos (bajo el mismo elemento padre) y el segundo elemento debe ir justo después del primero. Se usa el símbolo más “+” y un ejemplo sería: h1 + h2 {}. Siendo el código html el siguiente:
<body>
<h1>
Título </h1>
<h2>
Subtítulo </h2>
</body>
Ambos
elementos son hijos del elemento padre <body> y <h2> va después de
<h1>, de manera que cumple con las condiciones necesarias.
- Selector atributos: como su nombre indica, permite seleccionar elementos por sus atributos, se encierran entre corchetes “[]” y son cuatro tipos: [nombre atributo], [nombre atributo = valor], [nombre atributo ~= valor], [nombre atributo |= valor]. Un ejemplo de cada uno es el siguiente:
- a[class] {}. Selecciona los enlaces con atrbuto class, da igual su valor.
- a[class=”enlace”] {}. Selecciona los enlaces de clase con valor “enlace”.
- a[class ~= ”enlace”] {}. Selecciona los enlaces con atributo class y que al menos uno de sus valores sea “enlace”.
- *[lang |= “es”] {}. Selecciona todos los elementos de la página cuyo atributo lang empice por “es”.
gracias men!
ResponderEliminar