Klasa - CSS-Tricks | Almanach CSS 2025

Selektor klas w CSS zaczyna się od kropki (.), Na przykład:

.class ( )

Selektor klasy wybiera wszystkie elementy z pasującym atrybutem klasy.

Na przykład ten element:

Push Me

jest wybrany i stylizowany w następujący sposób:

.big-button ( font-size: 60px; )

Możesz nadać klasie dowolną nazwę zaczynającą się od litery, łącznika (-) lub podkreślenia (_). Możesz używać liczb w nazwach klas, ale liczba nie może być pierwszym znakiem ani drugim znakiem po łączniku. Chyba że oszalejesz i nie zaczniesz uciekać przed selektorami, co może być dziwne:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Element może mieć więcej niż jedną klasę:


 This paragraph will get styles from .intro and .blue selectors.

Element z wieloma klasami jest stylizowany zgodnie z regułami CSS dla każdej klasy. Możesz także łączyć wiele klas, aby wybierać elementy:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

To demo pokazuje, jak selektory jednoklasowe różnią się od selektorów kombinowanych:

Możesz również ograniczyć selektor klasy do określonego rodzaju elementu, który jest czasami nazywany „kwalifikowaniem tagu”:

ul.menu ( list-style: none; )

Specyficzność

Sam selektor klas ma wartość specyficzności 0, 0, 1, 0. Jest to „silniejsze” niż selektor elementu (np. :), a ( )ale mniej potężne niż selektor ID (np #header ( ).). Specyfika wzrasta, gdy łączysz selektory klas lub ograniczasz selektor do określonego elementu.

Dostęp do klas za pomocą JavaScript

Możesz czytać i manipulować klasami elementu classListw JavaScript. Na przykład dodanie klasy może wyglądać następująco:

document.getElementById('italicize').classList.add('italic');

To demo pokazuje podstawowe przykłady classListużycia:

jQuery ma również sposoby interakcji z klas, w tym .addClass(), .removeClass(), .toggleClass(), i .hasClass().

Więcej informacji

Przeczytaj specyfikację W3C dotyczącą selektorów klas.
Dowiedz się więcej o nazwach klas semantycznych.
Dowiedz się więcej o specyficzności.
Dowiedz się o różnicy między klasami a identyfikatorami.
Dowiedz się o wielu selektorach klas i kombinacjach selektorów klasy / identyfikatora.
Dowiedz się więcej o interfejsie API .classList.
Dowiedz się o manipulacji klasami w jQuery.