Element selectors (uitgebreid) Hier is de selector een element of een combinatie van elementen. |
|
Attribuut selectors (uitgebreid) Hier worden elementen geselecteerd op de waarde van een attribuut. |
|
Class en ID selectors (uitgebreid) Hier worden de elementen geselecteerd op basis van id en class naam. |
|
Pseudo-class selectors (uitgebreid) Hier worden elementen geselecteerd die zich in een specifieke staat bevinden. |
|
Pseudo-element selectors (uitgebreid) Hier worden gedeeltes van elementen geselecteerd die je van specifieke styling kunt voorzien. |
Een CSS-selector selecteert het HTML-element die je wilt stijlen. |
h1 {
color: red;
}
p {
color: blue;
}
abbr[title] {
color: red;
}
#succes {
color: green;
}
.rood {
color: red;
}
Een CLASS en ID-naam mogen niet beginnen met een cijfer. |
a:link {
color: black;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
color: gray;
}
a:focus {
color: green;
}
Om deze pseudo-class selectors goed te laten werken, moet je ze in de exacte volgorde definiëren: link, visited, hover, active, focus. |
De opbouw is als volgt:
selector::pseudo-elementnaam { stijldeclaratie }
p::first-line {
color: green;
font-weight: bold;
font-variant: small-caps;
}
Let op de dubbele dubbele punt ::first-line versus :first-line. In CSS3 werd de enkele dubbele punt vervangen door twee dubbele punten. Dit om onderscheid te maken tussen pseudo-classen en pseudo-elementen. |
Ad blocker gedetecteerd! | |
Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt. |