.
Wybiera elementy, które mają podaną klasę w atrybucie class. Najczęściej używany selektor do stylowania komponentów.
Przykład
#.btn {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #3f3f46;
color: #fff;
font-weight: 600;
}
.btn.primary {
background: #7c3aed;
}<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Anuluj</button>
<button class="btn primary" type="button">Zapisz postęp</button>
</div>Definicja i zastosowanie
#Selektor klasy zaczyna się kropką: .card wybierze każdy element, który w atrybucie class ma słowo card. Atrybut może zawierać kilka klas rozdzielonych spacjami (class="card pro"), a selektor pasuje, gdy wśród nich jest ta szukana.
Klasy to podstawa porządnego CSS. Jedną klasę możesz nadać wielu elementom różnego typu, a jeden element może mieć kilka klas. Specyficzność klasy to (0, 1, 0): więcej niż selektor typu, ale dużo mniej niż identyfikator, więc reguły łatwo ze sobą łączyć i nadpisywać.
Kilka klas zapisanych razem, bez spacji, oznacza „wszystkie naraz”: .btn.primary trafi tylko w element, który ma obie klasy. Ze spacją (.card .title) to już zupełnie inny selektor, kombinator potomka.
Wielkość liter ma znaczenie: .Card i .card to dwie różne klasy. Nazwa klasy w selektorze nie może też zaczynać się od cyfry (np. .1kolumna) bez ucieczki znakowej, dlatego najprościej takich nazw unikać.
Składnia
#.nazwa-klasy { właściwość: wartość; }Warianty zapisu
#- Każdy element z klasą
tag, niezależnie od znacznika i od innych klas. - Dwie klasy bez spacji: element musi mieć obie naraz.
- Znacznik połączony z klasą: tylko przyciski, które mają klasę
tag. - Selektor atrybutu, który działa dokładnie jak
.tagi ma tę samą wagę. Klasa to po prostu wygodny skrót.
Warianty zapisu w praktyce
#.tag
tag, niezależnie od znacznika i od innych klas..tag { background: #7c3aed; color: #fff; }.tag.hot
.tag.hot { background: #7c3aed; color: #fff; }[class~="tag"]
.tag i ma tę samą wagę. Klasa to po prostu wygodny skrót.[class~="tag"] { background: #7c3aed; color: #fff; }Więcej przykładów
#.card {
padding: 12px 14px;
border-radius: 12px;
background: #18181b;
}
.card__title {
margin: 0 0 4px;
font-size: 16px;
}
.card--pro {
outline: 2px solid #f59e0b;
}<div style="display: grid; gap: 10px;">
<div class="card">
<h3 class="card__title">Kurs HTML</h3>
<p style="margin: 0; color: #a1a1aa;">Zwykła karta</p>
</div>
<div class="card card--pro">
<h3 class="card__title">Kurs React</h3>
<p style="margin: 0; color: #a1a1aa;">Karta z modyfikatorem card--pro</p>
</div>
</div>W BEM każda część komponentu dostaje własną klasę, więc wszystkie selektory mają tę samą, niską wagę i nie zależą od struktury HTML.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nazywaj klasy od roli, a nie od wyglądu:
.alertprzetrwa zmianę koloru,.czerwony-tekstjuż nie. - Zamiast wydłużać selektor (
.sidebar .menu .item), nadaj elementowi własną klasę. Reguły będą krótsze, a specyficzność niska i przewidywalna. - W JavaScripcie klasy dodasz i usuniesz przez
element.classList.add("active")alboclassList.toggle(). To najprostszy sposób na zmianę wyglądu w reakcji na działanie użytkownika.
Powiązane hasła
#- #idWybiera element o podanym identyfikatorze z atrybutu id. Ma bardzo wysoką specyficzność, więc jego reguły trudno potem nadpisać.
- Selektor typuWybiera wszystkie elementy o podanej nazwie znacznika, na przykład każdy akapit p albo każdy punkt listy li.
- [atrybut]Wybiera elementy po atrybucie HTML i jego wartości: dokładnej, początku, końcu, fragmencie albo słowie z listy.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- A BSpacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.