Klasse - CSS-trucs

Anonim

Een class selector in CSS begint met een punt (.), Zoals hier:

.class ( )

Een klassenkiezer selecteert alle elementen met een overeenkomend klassenkenmerk.

Dit element bijvoorbeeld:

Push Me

is als volgt geselecteerd en gestileerd:

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

U kunt een klasse elke naam geven die begint met een letter, koppelteken (-) of onderstrepingsteken (_). U kunt cijfers gebruiken in klassenamen, maar een cijfer mag niet het eerste teken of het tweede teken na een koppelteken zijn. Tenzij je gek wordt en aan selectors begint te ontsnappen, wat raar kan worden:

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

Een element kan meer dan één klasse hebben:



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

Een element met meerdere klassen wordt opgemaakt met de CSS-regels voor elke klasse. U kunt ook meerdere klassen combineren om elementen te selecteren:

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

Deze demo laat zien hoe single-class selectors verschillen van gecombineerde selectors:

U kunt een klassenelector ook beperken tot een specifiek soort element, dat ook wel 'tagkwalificatie' wordt genoemd:

ul.menu ( list-style: none; )

Specificiteit

Op zichzelf heeft een class selector een specificiteitswaarde van 0, 0, 1, 0. Dat is "krachtiger" dan een element selector (zoals :) a ( )maar minder krachtig dan een ID selector (zoals #header ( )). Specificiteit neemt toe wanneer u klasseselectors combineert of de selector beperkt tot een specifiek element.

Klassen openen met JavaScript

U kunt de klassen van een element lezen en manipuleren classListin JavaScript. Het toevoegen van een klasse kan bijvoorbeeld zijn als:

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

Deze demo toont basisvoorbeelden van classListin gebruik:

jQuery heeft ook methoden voor interactie met klassen, met inbegrip van .addClass(), .removeClass(), .toggleClass(), en .hasClass().

Meer informatie

  • Lees de W3C-specificatie voor class selectors.
  • Meer informatie over semantische klassenamen.
  • Lees meer over specificiteit.
  • Lees meer over het verschil tussen klassen en ID's.
  • Meer informatie over meerdere klassenkiezers en klasse / ID-kiezercombinaties.
  • Lees meer over de .classList API.
  • Lees meer over klassenmanipulatie in jQuery.

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
Ieder Ieder Ieder Ieder Ieder Ieder Ieder