CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS 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.

VoorbeeldVoorbeeld: 
h1 {
 color: green;
}
p {
 color: grey;
}

De universele selector

Deze selector kan gebruikt worden om aan te geven dat de in een stijlregel gedefinieerde stijl betrekking heeft op alle elementen. De universele selector wordt aangeduid met een sterretje (*). De CSS-regel in de onderstaande voorbeeld heeft invloed op elk HTML-element op de pagina.

VoorbeeldVoorbeeld: 
* {
 text-align: center;
 font-weight: bold;
 color: red;
}

Groeperen van selectors

De groeperingselector selecteert alle HTML-elementen met dezelfde stijldefinities zo pas je dezelfde stijlen toe op verschillende elementen zonder de stijlen in uw stylesheet te herhalen. Bekijk de volgende CSS-code (de elementen h1, h2, h3 en p hebben dezelfde stijldefinities).

VoorbeeldVoorbeeld: 
h1 {
 text-align: center;
 color: green;
}

h2 {
 text-align: center;
 color: green;
}

h3 {
 text-align: center;
 color: green;
}

p {
 text-align: center;
 color: green;
}

Zoals je in het bovenstaande voorbeeld kunt zien, geldt voor h1, h2, h3 en p dezelfde stijlregel. Dat betekent dat deze kunnen worden gegroepeerd in een door komma's gescheiden lijst.

VoorbeeldVoorbeeld: 
h1, h2, h3, p {
 text-align: center;
 color: green;
}

Descendant selector

Bij descendant (afstammeling) element selectors wordt de stijl alleen aan een element toegevoegd, wanneer deze afstamt van een ander element.

VoorbeeldVoorbeeld: 
div p b { 
 color: #ff0000; 
}

In onderstaand voorbeeld zie je dat de stijlregels in de selector ul.menu alleen worden toegepast op de <a> elementen die zich in een <ul> element met de class .menu bevinden, en hebben geen effect op andere links in het document.

VoorbeeldVoorbeeld: 
ul.menu li a {
 margin: 10px;
 color: #999;
 font-weight: bold;
 text-decoration: none;
}

Child element selector

Een child selector wordt gebruikt om alleen de elementen te selecteren die een directe kind is van een bepaald element. Een child selector bestaat uit twee of meer selectors, gescheiden door een groter dan symbool (>).

Stijlregels met child element selectors hebben de volgende opbouw: 

Element1 > Element2 { stijldeclaratie }

VoorbeeldVoorbeeld: 
div > p {
 color: white;
 background-color: red;
}

In het voorbeeld hieronder wordt de stijlregel in de selector ul > li alleen toegepast op de <li> elementen die directe kinderen zijn van het <ul> element, en heeft geen effect op andere elementen in de lijst.

VoorbeeldVoorbeeld: 
ul > li {
 list-style: circle;
}
ul > li ol {
 list-style: square;
}

Adjacent sibling selector

Adjacent sibling element selector kun je gebruiken om elementen te selecteren op een vergelijkbaar niveau die direct na een ander specifiek element staat. In de stijlregel wordt tussen de elementen een plusteken (+) geplaatst.

Stijlregels met adjacent sibling selectors hebben de volgende opbouw: 

Element1 + Element2 { stijldeclaratie }

In onderstaand voorbeeld wordt het eerste p element geselecteerd dat direct na h1 element wordt geplaatst.

VoorbeeldVoorbeeld: 
h1 + p {
 color: blue;
 font-size: 18px;
}

In onderstaand voorbeeld wordt het eerste p element geselecteerd dat direct na ul element wordt geplaatst.

VoorbeeldVoorbeeld: 
ul.task + p {
 color: #f0f;
 text-indent: 30px;
}

Tip Onthoud dat de + selector wordt gebruikt om een element te selecteren dat direct na een ander specifiek element staat.

General sibling selector

General sibling selectors kun je gebruiken om de stijl vast te leggen van een element die na het hoofdelement komt. In de stijlregel wordt tussen de elementen een tilde teken (~) geplaatst.

Stijlregels met general sibling selectors hebben de volgende opbouw: 

Element1 ~ Element2 { stijldeclaratie }

VoorbeeldVoorbeeld: 
div ~ p {
 color: white;
 background-color: red;
}
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.