CSS -kiezers
Een CSS-selector selecteert de HTML-elementen die u wilt opmaken.
CSS-kiezers
CSS-kiezers worden gebruikt om de HTML-elementen die u wilt opmaken te "vinden" (of te selecteren).
We kunnen CSS-selectors onderverdelen in vijf categorieën:
- Eenvoudige selectors (selecteer elementen op basis van naam, id, klasse)
- Combinator-selectors (selecteer elementen op basis van een specifieke relatie ertussen)
- Pseudo-klasse selectors (selecteer elementen op basis van een bepaalde status)
- Pseudo-elementen selectors (selecteer en stijl een deel van een element)
- Attribuutselectors (selecteer elementen op basis van een attribuut of attribuutwaarde)
Op deze pagina worden de meest elementaire CSS-selectors uitgelegd.
De CSS-elementkiezer
De elementselector selecteert HTML-elementen op basis van de elementnaam.
Voorbeeld
Hier worden alle <p> elementen op de pagina gecentreerd uitgelijnd, met een rode tekstkleur:
p
{
text-align: center;
color: red;
}
De CSS-id-kiezer
De id selector gebruikt het id attribuut van een HTML-element om een specifiek element te selecteren.
De id van een element is uniek binnen een pagina, dus de id selector wordt gebruikt om één uniek element te selecteren!
Om een element met een specifieke id te selecteren, schrijft u een hekje (#) gevolgd door de id van het element.
Voorbeeld
De onderstaande CSS-regel wordt toegepast op het HTML-element met id="para1":
#para1
{
text-align: center;
color: red;
}
Let op: een id-naam mag niet beginnen met een cijfer!
De CSS-klassenkiezer
De klassenkiezer selecteert HTML-elementen met een specifiek klassenkenmerk.
Om elementen met een specifieke klasse te selecteren, schrijft u een punt (.) teken, gevolgd door de klassenaam.
Voorbeeld
In dit voorbeeld zijn alle HTML-elementen met class="center" rood en gecentreerd uitgelijnd:
.center {
text-align: center;
color: red;
}
U kunt ook specificeren dat alleen specifieke HTML-elementen door een klasse moeten worden beïnvloed.
Voorbeeld
In dit voorbeeld zijn alleen <p> elementen met class="center" rood en gecentreerd uitgelijnd:
p.center {
text-align: center;
color: red;
}
HTML-elementen kunnen ook naar meer dan één klasse verwijzen.
Voorbeeld
In dit voorbeeld wordt het <p> element gestyled volgens class="center" en class="large":
<p class="center large">This paragraph refers to two classes.</p>
Let op: een klasnaam mag niet beginnen met een cijfer!
De universele CSS-kiezer
De universele selector (*) selecteert alle HTML-elementen op de pagina.
Voorbeeld
De onderstaande CSS-regel is van invloed op elk HTML-element op de pagina:
*
{
text-align: center;
color: blue;
}
De CSS-groeperingkiezer
De groeperingselector selecteert alle HTML-elementen met dezelfde stijldefinities.
Bekijk de volgende CSS-code (de elementen h1, h2 en p hebben dezelfde stijldefinities):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Het is beter om de selectors te groeperen om de code te minimaliseren.
Scheid elke selector met een komma om selectors te groeperen.
Voorbeeld
In dit voorbeeld hebben we de selectors uit de bovenstaande code gegroepeerd:
h1, h2, p
{
text-align: center;
color: red;
}
Alle eenvoudige CSS-kiezers
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |