CSS Selectors

CSS-selectors vormen het hart van CSS. Ze worden gebruikt om de HTML-elementen die je wilt stijlen te selecteren. Selectors zijn één van de belangrijkste aspecten van CSS, omdat ze je in staat stellen om op verschillende manieren specifieke elementen op een webpagina te selecteren, zodat ze kunnen worden opgemaakt. Er zijn verschillende soorten selectors, deze kunnen we in vijf categorieën verdelen.

	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.

Element selectors

De element selector selecteert HTML-elementen op basis van de element naam. CSS-code met element selectors worden opgenomen in een stijlblok in de head van een document, of in een extern stijlblad.

Voorbeeld:

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

Uitproberen

Attribuut selectors

Het is mogelijk om HTML-elementen op te maken die specifieke attributen of attribuutwaarden hebben bijv. door gebruik te maken van attribuut-selectors, hiermee heb je de mogelijkheid om een stijl aan een element te koppelen afhankelijk van de aanwezigheid van een bepaald attribuut, of de waarde ervan.

Voorbeeld:

abbr[title] {
  color: red;
}

Uitproberen

Class en ID selectors

ID-Selector

De ID-selector wordt gebruikt om stijlregels te definiëren voor een enkel of uniek element. Om een element met een specifieke ID te selecteren zet je er een hekje(#) voor, gevolgd door een id-waarde. Het ID attribuut mag slechts één keer met een bepaalde id-waarde in een document worden opgenomen.

Voorbeeld:

#succes {
  color: green;
}

Uitproberen

CLASS-Selector

De class-selector kan worden gebruikt om elk HTML-element te selecteren dat een class-attribuut heeft. Alle elementen met die klasse worden opgemaakt volgens de gedefinieerde regel. De class-selector wordt gedefinieerd met een punt(.) gevolgd door de class-waarde. Het CLASS attribuut mag onbeperkt aantal keren met een bepaalde class-naam in een document worden opgenomen.

Voorbeeld:

.rood {
  color: red;
}

Uitproberen

Een CLASS en ID-naam mogen niet beginnen met een cijfer.

Pseudo-class selectors

Het coolste aan CSS is dat het je de mogelijkheid geeft om effecten toe te voegen aan de ankertags (link, visited, active, hover) ook wel links genoemd. In HTML is de enige manier om dit effect toe te voegen door gebruik te maken van JavaScript, maar met de toevoeging van CSS kunnen JavaScript-links worden vergeten.

Voorbeeld:

a:link {
 color: black;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: none;
}
a:active {
 color: gray;
}
a:focus {
 color: green;
}

Uitproberen

Om deze pseudo-class selectors goed te laten werken, moet je ze in de exacte volgorde definiëren: link, visited, hover, active, focus.

Pseudo-element selectors

CSS pseudo-element selectors kunnen worden gebruikt om bepaalde delen van een element op te maken zonder er ID's of classes aan toe te voegen. Het kan bijvoorbeeld worden gebruikt om de eerste letter of de eerste regel van de inhoud van een element te stijlen, of als je inhoud wilt toevoegen voor of na de inhoud van een element.

De opbouw is als volgt:

selector::pseudo-elementnaam { stijldeclaratie }

Voorbeeld:

p::first-line {
  color: green;
  font-weight: bold;
  font-variant: small-caps;
}

Uitproberen

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.

Vorige Volgende

	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.