Wyobraź sobie, że przed Twoimi oczami znajdują się trzy przedmioty koloru białego: stół, krzesło, kartka papieru. Twoim zadaniem jest pokolorowanie kartki papieru na kolor niebieski, a więc dokonujesz wyboru, czyli selekcji z pośród trzech wspomnianych przedmiotów i wybierasz kartkę papieru. Podobnie działa selektor CSS, ponieważ to za pomocą jego wskazujemy elementy HTML, które mają otrzymać dane właściwości wyglądu zdefiniowane w regule CSS.
Kiedy już zdecydujemy jakie właściwości wyglądu chcemy dodać do elementu HTML, to musimy go wskazać za pomocą selektora.
Utwórzmy regułę CSS, która będzie zmieniać kolor tła elementu HTML na jasnoniebieski. Aby tego dokonać należy umieścić w jej nawiasie klamrowym właściwość background-color wraz z wartością lightblue, co zostało zaprezentowane w kodzie, który znajduje się poniżej:
selektor {
background-color:lightblue;
}Aby uzupełnić naszą przykładową regułę CSS należy wskazać elementy HTML (za pomocą selektora), które mają otrzymać dane właściwości CSS znajdujące się w nawiasie klamrowym (w tym wypadku tą właściwością jest background-color wraz z wartością lightblue).
Istnieje spora liczba różnych selektorów CSS. Selektory CSS zostały dokładniej opisane w części przeznaczonej na owe selektory CSS.
Naszym zadaniem podczas tej części kursu CSS jest dodanie jasnoniebieskiego koloru tła do elementów div oraz p. Aby osiągnąć nasz cel możemy posłużyć się selektorem elementu.
Naszą wcześniej utworzoną regułę CSS uzupełniamy następującymi selektorami CSS:
div {
background-color:lightblue;
}
p {
background-color:lightblue;
}Pierwsza reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy div w danym dokumencie HTML i doda do nich właściwość background-color wraz z wartością lightblue, dzięki czemu tło w tych elementach będzie koloru jasnoniebieskiego.
Druga reguła CSS doda jasnoniebieski kolor tła do wszystkich elementów typu p.
Aby skrócić nieco nasz zapis możemy wykorzystać selektor kilku różnych elementów, dzięki czemu zostanie utworzona jedna grupa selektorów, która doda te same właściwości CSS do wskazanych elementów HTML.
div, p {
background-color:lightblue;
}Reguła CSS, którą stworzyliśmy powyżej, odszuka wszystkie elementy div oraz p w danym dokumencie HTML i doda do nich jasnoniebieski kolor tła.
Cały poprawny zapis został przedstawione w kodzie HTML, który znajduje się pod spodem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
div, p {
background-color:lightblue;
}
</style>
</head>
<body>
<p>to jest element - p - umieszczony w elemencie - body</p>
<div>to jest element - div - umieszczony w elemencie - body</div>
</body>
</html>Od tej pory nasze elementy HTML, wyświetlone w oknie przeglądarki internetowej, prezentują się następująco:
to jest element - p - umieszczony w elemencie - body
Ponadto przy poznawaniu selektorów należy zwrócić uwagę na to czy dany selektor CSS jest interpretowany przez wszystkie najnowsze wersje najbardziej popularnych przeglądarek internetowych. Jeżeli tak nie jest, to dany selektor CSS należy traktować bardziej jako ciekawostkę, niż jako selektor w pełni gotowy do wykorzystania w naszym kodzie.