class
Lista nazw klas, po których CSS i JavaScript odnajdują element.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<style>
.card { padding: 12px 16px; border-radius: 12px; border: 1px solid #333; }
.card-highlight { border-color: #a78bfa; background: #1e1533; }
</style>
<p class="card">Zwykła karta</p>
<p class="card card-highlight">Karta wyróżniona dwiema klasami</p>Definicja i zastosowanie
#Atrybut class przypisuje elementowi jedną lub więcej nazw klas, oddzielonych spacjami. Same klasy niczego nie zmieniają w wyglądzie. Nabierają znaczenia dopiero wtedy, gdy odwołasz się do nich w CSS (selektor .nazwa) albo w JavaScripcie.
Ta sama klasa może występować na wielu elementach, a jeden element może mieć wiele klas. Dzięki temu łączysz style jak klocki: class="btn btn-primary btn-large" to przycisk o wspólnym wyglądzie, z kolorem głównym i w dużym rozmiarze.
W JavaScripcie klasami najwygodniej zarządza się przez element.classList: metody add(), remove(), toggle() i contains() nie wymagają ręcznego sklejania napisów.
Składnia
#<element class="nazwa druga-nazwa">…</element>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, nie od wyglądu:
.alert-errorprzetrwa zmianę koloru,.red-textjuż nie. - Wielkość liter ma znaczenie:
Cardicardto dwie różne klasy.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.