Klass - CSS-tricks

Anonim

En klassväljare i CSS börjar med en punkt (.), Så här:

.class ( )

En klassväljare markerar alla element med ett matchande klassattribut.

Till exempel detta element:

Push Me

väljs och utformas så här:

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

Du kan ge en klass valfritt namn som börjar med en bokstav, bindestreck (-) eller understrykning (_). Du kan använda siffror i klassnamn, men ett nummer kan inte vara det första tecknet eller det andra tecknet efter ett bindestreck. Om du inte blir galen och börjar fly från väljare, vilket kan bli konstigt:

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

Ett element kan ha mer än en klass:



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

Ett element med flera klasser är utformat med CSS-reglerna för varje klass. Du kan också kombinera flera klasser för att välja element:

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

Denna demo visar hur enklassiga väljare skiljer sig från kombinerade väljare:

Du kan också begränsa en klassväljare till en viss typ av element, som ibland kallas "tagkvalificering":

ul.menu ( list-style: none; )

Specificitet

I sig själv har en klassväljare ett specificitetsvärde på 0, 0, 1, 0. Det är "kraftfullare" än en elementväljare (som a ( ):) men mindre kraftfull än en ID-väljare (som #header ( )). Specificiteten ökar när du kombinerar klassväljare eller begränsar väljaren till ett specifikt element.

Åtkomst till klasser med JavaScript

Du kan läsa och manipulera ett elements klasser med classListi JavaScript. Att lägga till en klass kan till exempel vara som:

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

Denna demo visar grundläggande exempel på classListanvändning:

jQuery har också metoder för att interagera med klasser, bland annat .addClass(), .removeClass(), .toggleClass(), och .hasClass().

Mer information

  • Läs W3C-specifikationen för klassväljare.
  • Lär dig mer om semantiska klassnamn.
  • Lär dig mer om specificitet.
  • Lär dig om skillnaden mellan klasser och ID.
  • Lär dig om flera klassväljare och kombinationer av klass / ID-väljare.
  • Lär dig mer om .classList API.
  • Lär dig mer om klassmanipulation i jQuery.

Webbläsarstöd

Krom Safari Firefox Opera IE Android iOS
Några Några Några Några Några Några Några