Klase - CSS-triki | CSS almanahs 2025

Klases atlasītājs CSS sākas ar punktu (.), Piemēram:

.class ( )

Klases atlasītājs atlasa visus elementus ar atbilstošu klases atribūtu.

Piemēram, šis elements:

Push Me

ir izvēlēts un veidots šādi:

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

Klasei varat piešķirt jebkuru vārdu, kas sākas ar burtu, defisi (-) vai pasvītrojumu (_). Klases nosaukumos varat izmantot ciparus, taču skaitlis nevar būt pirmais vai otrais raksturs pēc defises. Ja vien nenonāksiet traks un nesāksiet bēgt no atlasītājiem, kas var kļūt dīvaini:

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

Elementam var būt vairākas klases:


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

Elements ar vairākām klasēm tiek veidots atbilstoši katras klases CSS noteikumiem. Varat arī apvienot vairākas klases, lai atlasītu elementus:

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

Šajā demonstrācijā parādīts, kā vienas klases selektori atšķiras no kombinētajiem selektoriem:

Varat arī ierobežot klases atlasītāju līdz noteiktam elementa veidam, ko dažkārt sauc par “tagu kvalifikāciju”:

ul.menu ( list-style: none; )

Konkrētība

Pats par sevi klases atlasītājam ir specifiskuma vērtība 0, 0, 1, 0. Tas ir “jaudīgāks” nekā elementu atlasītājs (piemēram:), a ( )bet mazāk spēcīgs nekā ID selektors (piemēram #header ( )). Konkrētība palielinās, apvienojot klases atlasītājus vai ierobežojot selektoru ar noteiktu elementu.

Piekļuve klasēm ar JavaScript

Varat lasīt un manipulēt ar elementa klasēm classListJavaScript. Piemēram, klases pievienošana varētu būt šāda:

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

Šajā demonstrācijā ir parādīti galvenie lietošanas piemēri classList:

jQuery ir arī metodes, mijiedarbojoties ar klasēm, tai skaitā .addClass(), .removeClass(), .toggleClass(), un .hasClass().

Vairāk informācijas

Izlasiet W3C specifikāciju klases atlasītājiem.
Uzziniet vairāk par semantisko klašu nosaukumiem.
Uzziniet vairāk par specifiku.
Uzziniet par atšķirību starp klasēm un ID.
Uzziniet par vairākiem klases atlasītājiem un klases / ID selektoru kombinācijām.
Uzziniet par .classList API.
Uzziniet par klases manipulācijām jQuery.