Selektor klasy
- Data publikacji
- Ostatnio edytowano
Przeznaczenie selektora klasy
.klasa { ... }
Selektor klasy odszukuje każdy element HTML, który posiada atrybut class o podanej przez nas wartości.
Selektor klasy tworzymy za pomocą znaku . (kropka), po którym należy umieścić wartość atrybutu class interesującego nas elementu HTML, dzięki czemu selektor klasy może dokonać selekcji.
Informacje techniczne o selektorze klasy
- ograniczenie - elementy HTML
-
brak
- ograniczenie - właściwości CSS
-
brak
Przykładowa reguła CSS, selektor klasy
.lipiec {
color:red;
}Wyjaśnienie przykładowej reguły CSS
.lipiec { color:red; }
.-
do każdego elementu HTML, który posiada atrybut
class lipiec-
o wartości
lipiec color-
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
red-
na barwę czerwoną
Kod źródłowy przykładowego dokumentu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
.lipiec {
color:red;
}
</style>
</head>
<body>
<div class="czerwiec">
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ wartością atrybutu "class" tego elementu HTML jest wartość "czerwiec", a nie wartość "lipiec"
</div>
<p class="lipiec">
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML posiada atrybut "class" o wartości "lipiec"
</p>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "class" o wartości "lipiec"
</p>
<div class="czerwiec lipiec">
tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ jedną z wartości atrybutu "class" tego elementu HTML jest wartość "lipiec"
</div>
</body>
</html>Rezultat
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML posiada atrybut "class" o wartości "lipiec"
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "class" o wartości "lipiec"
Interpretacja selektora klasy
-
tak
-
tak
-
tak
-
tak
-
tak
-
tak