Die selectors bepalen op welke manier de CSS-stijlen aan de HTML-elementen worden toegewezen. Bij een overeenkomstige definitie geeft men eerst de naam van het element aan waaraan de selector moet worden toegekend. De eigenlijke declaratie vindt vervolgens plaats tussen accolades. Binnen een declaratie kunnen één of meerdere eigenschappen worden opgegeven. De algemene syntaxis ziet er dus als volgt uit:
Selector {
Eigenschap1: Waarde;
Eigenschap2: Waarde;
Eigenschap3: Waarde;
}Een overeenkomstige definitie is jullie al tegengekomen in de vorige tutorial.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}Let er absoluut op om elke declaratie te beëindigen met een puntkomma.
Een kijkje op de beschikbare selectors
Feit is dat CSS een behoorlijk aantal selectors heeft, waarvan ik de belangrijkste aan jullie zal presenteren. Want één ding is duidelijk: alleen als je het werken met de selectors beheerst, kun je op een zinvolle manier CSS-eigenschappen definiëren.
De eenvoudigste manier om stijlen toe te wijzen binnen een HTML-document is via de Element-selector.
Door de volgende syntaxis wordt de kleur zwart toegewezen aan alle p-elementen.
p {
color: #009966;
}Indien je meerdere elementen dezelfde stijl wilt toewijzen, is dat ook mogelijk.
In dat geval noteer je gewoon de relevante elementen achter elkaar, telkens gescheiden door een komma.
p, h1, li {
color: #000;
}Je kunt ook meerdere stijlen toewijzen aan elementen. De stijlen worden elk gescheiden door een puntkomma genoteerd.
p {
color: #000;
background-color: red;
}Een combinatie van de genoemde varianten is ook mogelijk.
p, h1, li {
color: #009966;
background-color: red;
}Het resultaat kan er als volgt uitzien:
Delen met meerdere elementen
Vaak is er behoefte aan het opmaken van een gebied dat bestaat uit meerdere HTML-elementen. Voor dergelijke gevallen zijn er in HTML twee speciale elementen, span en div. Deze elementen zullen jullie ook herhaaldelijk tegenkomen in deze serie.
Een voorbeeld:
<div class="artikel"> <h1>Kleur explosie</h1> <p class="thema">Een tutorial voor het maken van een kleurexplosie door <span class="auteur">MarkusMelzer</span>.</p> </div>
Het enige verschil tussen div en span is dat het div-element een nieuwe regel in de tekststroom afdwingt. span daarentegen creëert geen nieuwe regel. In het getoonde voorbeeld wordt een div-gebied gedefinieerd waarin een kop en een alinea zitten. Binnen de alinea is er op zijn beurt een span-gebied.
ID- en Class selectors
Tot nu toe zijn elementselectors gebruikt. Met het volgende voorbeeld worden met zo'n selector alle h1-koppen geformatteerd.
h1 {
color: #000;
background-color: red;
}Dit is natuurlijk niet altijd gewenst op deze manier. Wat als je bijvoorbeeld slechts één of enkele, maar niet alle h1-koppen bepaalde eigenschappen wilt toekennen? Voor dergelijke gevallen biedt CSS twee mogelijkheden, namelijk de klassen- en ID-selectors.
Met klassen-selectors kunnen HTML-elementen met klassenattributen zeer gericht worden geselecteerd. In het betreffende HTML-element moet het attribuut class worden gespecificeerd. Klassedefinities beginnen met een punt.
Een voorbeeld:
.rood {
color: red;
}Hier is de klasse rood gedefinieerd. Om de aan rood toegewezen eigenschappen aan een HTML-element toe te voegen, geef je class gevolgd door de klassenaam op.
<p class="rood">PSD-Tutorials.de</p>
De ID-selector kan op een soortgelijke manier worden gebruikt. Je herkent de ID-selector aan een hekje.
#topnavigatie {
color: blauw;
};In dit voorbeeld wordt de ID topnavigatie gedefinieerd. Maar let op: een ID mag feitelijk slechts één keer worden toegewezen binnen een document. De toegang tot een gedefinieerde ID-eigenschap ziet er dan als volgt uit:
<div id="topnavigatie">Hier staat de navigatie</div>
Het attribuut id wordt toegewezen aan de ID-naam. Let erop dat hier het hekje niet wordt genoteerd.
De getoonde informatie kan overigens ook met elkaar gecombineerd worden. Zo kun je bijvoorbeeld meerdere klassen toewijzen aan een HTML-element.
<p class="rood groot">PSD-Tutorials.de</p>
In dit voorbeeld worden de tekst alinea de twee klassen rood en groot toegewezen. Als je een klasse en een ID wilt aangeven, ziet dat er echter als volgt uit:
<p class="rood" id="navi">PSD-Tutorials.de</p>
Je kunt ook elementen en ID's met elkaar combineren. Ook hiervoor een voorbeeld:
div.navi {
color: blauw;
}
Deze syntaxis zou alleen van toepassing zijn op div-elementen met de klasse navi. p-elementen met ook de klasse navi zouden hierdoor onaangetast blijven.
In CSS is er nog een andere manier om selectors te combineren. Bekijk daarvoor de volgende syntaxis:
h1 {
color: rood;
}
em {
color: blauw;
}Door de combinatie van beide instructies kan je er echter voor zorgen dat alleen de em-elementen blauw worden gekleurd die zich binnen h1-elementen bevinden.
h1 em {
color: blauw;
};
De elementnamen worden hier zonder komma's van elkaar gescheiden genoteerd.
Dit is overigens een veelvoorkomende valkuil waar met name beginnende CSS-ontwikkelaars in trappen. Hier dezelfde syntaxis, maar met een komma toegevoegd:
h1, em {
color: blauw;
}
Wat betekent deze syntaxis? Alle h1- en alle em-elementen worden geselecteerd. Dit is dus heel iets anders dan de syntaxis zonder komma!
Nog een belangrijke selector is de universele selector. Hiermee kan een willekeurig element worden geselecteerd. Deze selector wordt gedefinieerd met een asterisk (*).
* {
color: rood;
}
Met deze syntaxis zouden alle elementen rood worden gekleurd. Ook bij deze selector zijn er weer enkele syntaxis bijzonderheden om rekening mee te houden.
#mainnavi * {
color: rood;
}
In dit voorbeeld wordt de voorgrondkleur van alle elementen binnen het element met de ID mainnavi op rood gezet. Dit geldt echter niet voor het element zelf.
Als de universele selector aan het begin van een declaratie zou staan, hoef je hem trouwens niet te noteren. Iets dergelijks als dit zou dus overbodig zijn:
* p {
color: rood;
}
Deze syntaxis is equivalent aan de volgende:
p {
color: rood;
}
In de volgende tutorial zul je meer selectors leren kennen.
