CSS Class Selector Detailed

De class selector staat toe om stijlen op een manier op te geven die onafhankelijk is van de documentelementen.

CSS Class Selectors

De class selector staat toe om stijlen op een manier op te geven die onafhankelijk is van de documentelementen.

Deze selector kan alleen worden gebruikt of gecombineerd met andere elementen.

Tip:Alleen na het juist markeren van het document kunnen deze selectoren worden gebruikt, dus het gebruik van deze twee selectoren vereist meestal eerst wat conceptueel werk en planning.

De meest gebruikte methode om stijlen toe te passen zonder rekening te houden met specifieke ontwerpelementen, is het gebruik van de class selector.

Wijzig de HTML-code

Voor het gebruik van de class selector moet de specifieke documentmarkering worden aangepast, zodat de class selector correct werkt.

Om de stijl van de class selector met het element te koppelen, moet de class een geschikte waarde worden toegewezen. Zie onderstaande HTML-code:

<h1 class="important">
Deze titel is zeer belangrijk.
</h1>
<p class="important">
Deze alinea is zeer belangrijk.
</p>

In de bovenstaande code zijn de class van beide elementen opgegeven als important: de eerste titel (h1-element) en de tweede alinea (p-element).

Syntaxis

Vervolgens gebruiken we de volgende syntaxis om stijlen toe te passen op deze gecategoriseerde elementen, waarbij een punt (.) voor de class naam staat, gevolgd door de wildcard selector:

*.important {color:red;}

Als je alleen alle elementen wilt selecteren met dezelfde class naam, kun je de wildcard selector in de class selector negeren, wat geen slechte gevolgen heeft:

.important {color:red;}

Try It Yourself

Gecombineerd met element selectors

Class selectors kunnen worden gecombineerd met element selectors.

Bijvoorbeeld, je zou kunnen willen dat alleen paragrafen rood tekst worden weergegeven:

p.important {color:red;}

De selector zal nu alle p-elementen matchen met de class attribute die 'important' bevat, maar geen andere elementtypen, ongeacht of deze class attribute heeft. De selector p.important betekent: 'Alle paragrafen met de class attribute waarde 'important''. Omdat het h1-element geen paragraaf is, past deze selector niet op het element, dus het h1-element wordt niet rood tekst.

Als je echt een andere stijl wilt toepassen op het h1-element, kun je de selector h1.important gebruiken:

p.important {color:red;}
h1.important {color:blue;}

Try It Yourself

CSS meerdere class selectors

In het vorige hoofdstuk hebben we behandeld dat er een woord in de class waarde zit. In HTML kan een class waarde een lijst van woorden bevatten, gescheiden door spaties. Bijvoorbeeld, als je een specifiek element zowel belangrijk (important) als waarschuwing (warning) wilt markeren, kun je het schrijven:

<p class="important warning">
Dit paragraaf is een zeer belangrijke waarschuwing.
</p>

De volgorde van deze woorden is niet belangrijk, je kunt het ook schrijven als 'warning important'.

We veronderstellen dat alle elementen met de class 'important' vet zijn, en dat alle elementen met de class 'warning' schuin zijn, en alle elementen die zowel 'important' als 'warning' bevatten, hebben ook een zilveren achtergrond. Dit kan worden geschreven:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Try It Yourself

Door twee class selectors samen te koppelen, kan alleen worden gekozenContaining these class names at the same timeelements (the order of class names is not limited).

If a multi-class selector contains a class name that is not in the list of class names, the match will fail. Please see the following rules:

.important.urgent {background:silver;}

As expected, this selector will only match p elements that have the words important and urgent in the class attribute. Therefore, if a p element only has the words important and warning in its class attribute, it will not match. However, it can match the following elements:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

Try It Yourself

Important Note:Before IE7, different platforms of Internet Explorer could not handle multi-class selectors correctly on different platforms.