Grupări

Poţi să oferi aveleaşi proprietăţi, mai multor selectoare, fără să fii nevoit să le scrii la fiecare în parte, aceleaşi valori.De exemplu dacă ai un cod de genul :

h2 {
color: red;
}

.UnSelectorClass {
color: red;
}

.AltSelectorClass {
color: red;
}

Poţi să scrii codul aşa :

h2, .UnSelectorClass, .AltSelectorClass {
color: red;
}

Adăugări

Dacă codul din documentul CSS este structurat bine, nu ar fi necesar să foloseşti în exces selectoare CLASS şi ID, pentru că poţi oferi unui selector, aceleaşi valori de la alt selector. Uite ce vreau să zic :

#top {
background-color: #ccc;
padding: 1em
}

#top h1 {
color: #ff0;
}

#top p {
color: red;
font-weight: bold;
}

Aplicarea în codul HTML ar arăta cam aşa :

<div id=“top”>

<h1>Despre biscuiţii cu ciocolata</h1>

<p>Asta este replica mea atunci când gust biscuiţi de casă, cu ciocolată!</p>

<p>Mmm mm mmmmm</p>

</div>

Aşadar selectorului “h1″, pe lăngă valorile şi proprietăţile pe care le avea selectorul “top” am mai adăugat şi culoarea #ff0, iar la “p” (tag-ul pentru paragraf) am mai adaugat stilul bold şi culoarea rosie.

Toată şmecheria asta, ar putea deveni puţin mai complicată dacă te duci cu valorile de la un selector, pentru alt selector, şi iar pentru altul, iar ca să le urmareşti şi să le reţii valorile ca să nu cumva sa le încurci, iti trebuie puţină practică, dar hai să fim serioşi, cât de greu vi se pare ?