En klassevælger i CSS starter med en prik (.) Som denne:
.class ( )
En klassevælger vælger alle elementer med en matchende klasseattribut.
For eksempel dette element:
Push Me
er valgt og stylet således:
.big-button ( font-size: 60px; )
Du kan give en klasse ethvert navn, der starter med et bogstav, bindestreg (-) eller understregning (_). Du kan bruge tal i klassenavne, men et tal kan ikke være det første tegn eller det andet tegn efter en bindestreg. Medmindre du bliver skør og begynder at flygte vælgere, hvilket kan blive underligt:
.\3A \`\( ( /* matches elements with class=":`(" */ )
Et element kan have mere end en klasse:
This paragraph will get styles from .intro and .blue selectors.
Et element med flere klasser er stylet med CSS-reglerne for hver klasse. Du kan også kombinere flere klasser for at vælge elementer:
/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )
Denne demo viser, hvordan enkeltklassevælgere adskiller sig fra kombinerede vælgere:
Du kan også begrænse en klassevælger til en bestemt type element, der undertiden kaldes "tagkvalificering":
ul.menu ( list-style: none; )
Specificitet
I sig selv har en klassevælger en specificitetsværdi på 0, 0, 1, 0. Det er "mere kraftfuld" end en elementvælger (som a ( )
:), men mindre kraftig end en ID-vælger (som #header ( )
). Specificiteten øges, når du kombinerer klassevælgere eller begrænser vælgeren til et bestemt element.
Adgang til klasser med JavaScript
Du kan læse og manipulere klasser med et element classList
i JavaScript. For eksempel kan tilføjelse af en klasse være som:
document.getElementById('italicize').classList.add('italic');
Denne demo viser grundlæggende eksempler på classList
i brug:
jQuery har også fremgangsmåder til at interagere med klasser, herunder .addClass()
, .removeClass()
, .toggleClass()
, og .hasClass()
.
Mere information
- Læs W3C-specifikationen for klasseudvælgere.
- Lær mere om semantiske klassenavne.
- Lær mere om specificitet.
- Lær om forskellen mellem klasser og ID'er.
- Lær om flere klassevælgere og kombinationer af klasse / ID-vælger.
- Lær om .classList API.
- Lær om klassemanipulation i jQuery.
Browsersupport
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Nogen | Nogen | Nogen | Nogen | Nogen | Nogen | Nogen |