De element selector

Het eenvoudigste type selector is gericht op een standaard HTML element. Je kan bijvoorbeeld alle letters in alle paragraph (alinea) elementen (<p>) een stijl geven met simpelweg de selector p:

p {
	color: Red;
}

Met dit simpele regeltje veranderen we de kleur van alle letters in alle alinea's in rood; geeft dat geen gevoel van macht?

Je kan alle standaard HTML elementen op deze manier van een stijl voorzien. Je kan zelfs niet-standaard elementen van een stijl voorzien. Als je document de tag <tijger> bevat, kan je de CSS selector tijger invoeren die properties toekent aan het tijger element. Dit document zal echter niet zonder foutboodschappen door de W3C validator komen!

In het algemeen zullen je selectors zich richten op huis- tuin- en keuken tags. Je zou bijvoorbeeld kunnen beslissen dat bold-tags (<b>) niet langer de tekst vet moeten maken:

b {
	font-weight: normal;
}

Vrijwel all browsers hebben een eigen stijlblad waarin de tag <b> tekst vet maakt, maar CSS stelt ons in staat dat te overschrijven, zoals we net gedaan hebben.

Hier is een wat uitgebreider voorbeeld waarin we gebruiken wat we net geleerd hebben. Verander maar eens wat properties en bekijk hoe dat de tekst beïnvloedt:

<style type="text/css">
p {
	color: Red;
}

b {
	font-weight: normal;
}
</style>

<p>Here's a paragraph!</p>

<p>Here's another <b>paragraph</b> - the word paragraph would normally be bold here!</p>

Samenvatting

Een zeer belangrijk voordeel van selectors is dat ze globaal zijn, hun regels bestrijken het hele document waarin hun style block opgenomen is. Het is duidelijk dat dit voordeel ook zijn spreekwoordelijke nadeel heeft; soms wil je helemaal niet dat álle elementen een zekere property krijgen, maar bijvoorbeeld alleen díe elementen die onderin de DOM tree zitten (diep genest zijn). Gelukkig zijn er allerlei andere mogelijkheden, zoals class en ID selectors, die meer gericht werken. Dit komt nu aan de orde.