Selectors CSS

Quan escrivim una regla en un full d’estil en cascada CSS el selector és qui determina a qui afectarà la regla.

SELECTOR {
PROPIETAT1 : VALOR1;
PROPIETAT2 : VALOR2;
}

Hi ha diverses maneres d’indicar a qui afectara una determinada regla. Els selectors es poden referir a elements HTML, selectors id i selectors class.

Selectors HTML: Tots els elements del matèix tipus

Els selectors HTML modifiquen l’aspecte de tots els element HTML d’un determinat tipus. Per exemple:

p {
color: red;
}

Segons la regla anterior tots els elements p apareixeran de color roig.

Selectors id: Un element en concret

Anteriorment has vist com algunes etiquetes HTML poden tenir un atribut amb un valor determinat. En l’exemple següent una etiqueta <p> té un atribut id amb el valor principal.

<p id="principal"> ... </p>

Generalment utilitzarem l’atribut id per identificar un element concret d’un document. Per exemple podem trobar al nostre document HTML. En l’exemple anterior assignem a un paràgraf l’identificador «principal». Ara podem referir-nos a ell individualment, i fer que una regla CSS li siga aplicada escrivint al nostre document CSS el següent:

p#principal {
color: red;
}

La regla anterior modificarà solament al element h1 amb l’identificador «principal», però no a cap altre del document.

Nota

Podem inventar qualsevol identificador per a qualsevol element HTML, però cal que aquestos siguen únics. Si utilitzem el matèix identificador en més d’un element el validador ho considerarà un error.

Selectors class: Alguns elements

Altre atribut que poden tenir els nostres elements HTML és class. Aquest funciona de manera similar als atributs id, però al contrari que aquestos sí que es pot repetir el diferents elements. Utilitzarem aquest atribut per identificar un conjunt d’elements d’un document.

En els documents CSS els selectors class modifiquen els elements HTML que comparteixen un cert valor per a l’atribut class.

Per exemple, al nostre document HTML podem escriure

<p class="advertència"> ... </p>

i al document CSS

p.advertència {
color: red;
}

Si al selector indiquem el tipus d’element i la seua clase (per exemple p.advertència) la regla afectarà a tots els paràgrafs amb l’atribut class=advertència, mentre que si escrivim al selector la classe sense indicar el tipus d’element (per exemple simplement .advertència, amb el punt al principi) la regla afectarà a qualsevol element amb aquest atribut.

.fonsverd {
    background-color: #0A8915;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>
<p class="fonsverd">Aquest paràgraf tindrà el fos verd.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
    <li>Lorem ipsum</li>
    <li class="fonsverd">Aquest element de llista també tindrà el fos verd.</li>
    <li>Consectetur adipiscing</li>
</ul>

Pseudo-clases i pseudo-elements

Podem modificar l’aspecte d’un fragment d’un element (pseudo-classe) o establir una condició per a que la regla siga aplicada (pseudo-element). Les pseudo-classes i pseudo-elements apareixen a continuació del selector principal, separats per dos punts (:).

A continuació tens un exemple de pseudo-classe que modifica únicament la primera lletra dels paràgrafs, i un pseudo-element que aplica una regla sobre els enllaços únicament quan el ratolí passa sobre ells.

p:first-letter {
color:red;
}
a:hover {
color:red;
}