Lekcja 7: Identyfikacja i grupowanie elementów (class i id)

Czasami chcemy zastosować ten sam określony styl do pewnego elementu lub grupy elementów. W tej lekcji, pokażemy bliżej jak można korzystać z atrybutów class oraz id do określenia właściwości stylu pewnych elementów.

Jak możesz pokolorować dany nagłówek inaczej niż wszystkie inne nagłówki na stronie? Jak możesz pogrupować swoje odnośniki w różne kategorie i dać każdej z kategorii inny styl? Oto przykłady odpowiadające na proste pytania zadane w tej lekcji.
Grupowanie elementów poprzez klasę

Powiedzmy że mamy dwie listy odnośników do różnych stron związanych z czerwonym i białym winem. Kod HTML może wyglądać następująco:


<p>Grona białego wina:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>

<p>Grona czerwonego wina:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>

    * Pokaż przykład

Teraz chcemy żeby odnośniki z kategorii białego wina były żółte, z czerwonego natomiast żeby były czerwone a reszta istniejących odnośników żeby była niebieska.

Aby to osiągnąć, dzielimy odnośniki w dwie kategorie. Robimy tak poprzez nadanie klasy używając atrybutu class.

Spróbujmy określić pewne klasy używając kodu z powyższego przykładu:


<p>Grona białego wina:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Grona czerwonego wina:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>

Możemy teraz zdefiniować specjalne właściwości dla odnośników należących odpowiednio do białego oraz czerwonego wina.


a {
    color: blue;
}

a.whitewine {
    color: #FFBB00;
}

a.redwine {
    color: #800000;
}

    * Pokaż przykład

Jak pokazaliśmy w przykładzie, możesz zdefiniować właściwości dla elementów które należą do konkretnej klasy poprzez użycie .nazwaklasy w arkuszu stylów.
Identyfikacja elementu poprzez id

Dodatkowo aby pogrupować elementy, możesz potrzebować umieć identyfikować jeden unikalny element. Robi się to poprzez użycie atrybutu id.

Co jest specjalnego w atrybucie id, to że nie mogą istnieć dwa elementy w danym dokumencie HTML o tej samej wartości atrybutu id. Każde id musi być unikalne. Innymi słowy, powinieneś używać atrybutu class jeżeli chcesz grupować parę lementów. Teraz, popatrzmy bliżej na przykład możliwości użycia atrubutu id:


<h1>Sekcja 1</h1>
...
<h2>Sekcja 1.1</h2>
...
<h2>Sekcja 1.2</h2>
...
<h1>Sekcja 2</h1>
...
<h2>Sekcja 2.1</h2>
...
<h3>Sekcja 2.1.2</h3>
...

Powyżej mogą być nagłówki do sekcji akapitów. Naturalnie możemy dodać id do każdej z sekcji:


<h1 id="c1">Sekcja 1</h1>
...
<h2 id="c1-1">Sekcja 1.1</h2>
...
<h2 id="c1-2">Sekcja 1.2</h2>
...
<h1 id="c2">Sekcja 2</h1>
...
<h2 id="c2-1">Sekcja 2.1</h2>
...
<h3 id="c2-1-2">Sekcja 2.1.2</h3>
...

Powiedzmy że nagłówek dla sekcji 1.2 musi być czerwony. Możesz tak zrobić za pomocą następującego kodu CSS:


#c1-2 {
    color: red;
}

    * Pokaż przykład

Jak widać w powyższym przykładzie możesz zdefiniować właściwości dla konkretnego elementu poprzez użycie selektora #id w arkuszu stylów dokumentu.
Podsumowanie

W tej lekcji nauczyliśmy się dodatkowej możliwości użycia selektorów, class oraz id, możesz teraz określić właściwości dla konkretnych elementów.

W następnej lekcji, popatrzymy bliżej na dwa elementy HTML, które często łączymy z właściwościami CSS: <span> oraz <div>.