Je kunt zogenaamde kinderlementen aanspreken. Deze zijn diegene die direct onder andere elementen zijn geplaatst. Dat klinkt toegegeven wat abstract, maar kan mooi worden uitgelegd aan de hand van een voorbeeld.
<body> <p>Paragraaf 1</p> <p>Paragraaf 2</p> <p>Paragraaf 3</p> </body>
Hier is body het ouderlijk element. De p-elementen zijn respectievelijk kinderlementen van body. Gebaseerd op deze kennis kan de kinderlement-selector worden toegepast.
body>p {
kleur: blauw;
}
Deze syntaxis wijzigt alle alinea's die directe kinderen van body zijn naar de kleur blauw.
Het volgende voorbeeld laat nogmaals de verschillen zien tussen de twee instructies body p en body>p.
<!DOCTYPE html>
<html lang="nl">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
lettertype:"Courier New", Courier, monospace;
lettergrootte: 200%;
}
body p {
kleur:#0066FF;
}
</style>
</head>
<body>
<p>Paragraaf 1</p>
<p>Paragraaf 2</p>
<p>Paragraaf 3</p>
<div>
<p>Paragraaf 4</p>
</div>
</body>
</html>De eerste drie gedefinieerde p-tekstalinea's zijn directe kinderen van body. De instructie body p wijst alle tekstalinea's een blauwe kleur toe. body>p heeft alleen invloed op de eerste drie tekstalinea's. Daarom worden deze alinea's ook weergegeven in een groter lettertype.
Als volgende wil ik jullie de naastvolgend element-selector laten zien. Deze selector markeert een element dat direct volgt op een ander element en hetzelfde ouderlijke element heeft. Ook hiervoor is een voorbeeld:
h1+p {
kleur: blauw;
}
Met deze syntaxis wordt de tekstkleur van een alinea ingesteld op blauw. Dit geldt echter alleen als de alinea direct volgt op een titel van de eerste orde.
<!DOCTYPE html>
<html lang="nl">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
kleur: blauw;
}
</style>
</head>
<body>
<h1>Titel</h1>
<p>Paragraaf 1</p>
<h2>Titel</h2>
<p>Paragraaf 2</p>
<p>Paragraaf 3</p>
<div>
<p>Paragraaf 4</p>
</div>
</body>
</html>Bekijk het resultaat in de browser.
Alleen de eerste alinea wordt hier weergegeven in blauw. De andere alinea's zijn zwart. Dit komt doordat deze p-elementen niet volgen op h1, maar op h2.
Voor wat betreft de naastvolgende elementen zijn in CSS3 overigens extra mogelijkheden geïntroduceerd. Het is nu bijvoorbeeld mogelijk om toegang te krijgen tot alle volgende elementen van een bepaald element. Een voorbeeld:
h1~p {
kleur: rood;
}
Met deze syntaxis worden alle alinea's aangesproken die volgen op h1.
Men kan overigens niet alleen direct elementen aanspreken. Ook toegang door middel van de attributen van de elementen is mogelijk.
Enkele van deze selectors zijn:
• [att] - Het element moet alleen het attribuut bevatten. Of er ook een waarde wordt doorgegeven, doet er niet toe.
• a[href] - Alle hyperlinks (<a href=...>) worden gemarkeerd. Dit geldt echter niet voor ankerdefinities (<a name=...>).
• [align=left] - Markeert alle elementen waarvan het attribuut align de waarde left heeft.
• [attr~=value] - Alle elementen worden gemarkeerd waarin value voorkomt in een door spaties gescheiden lijst van waarden.
• [attr|=value] - Markeert een element wanneer de opgegeven waarde vooraan staat in een streng van tekens gescheiden door een koppelteken binnen het attribuut.
• img[width="200"] - Hier worden alle afbeeldingen gemarkeerd die een breedte van 200 pixels hebben.
De vraag rijst natuurlijk wanneer men eigenlijk deze attribuut-selectors nodig zou hebben. Denk bijvoorbeeld aan een formulier met daarin gedefinieerde selectievakjes. Selectievakjes worden - zoals je inmiddels weet - gedefinieerd via het input-element. Het probleem daarbij: Het input-element wordt ook gebruikt voor het definiëren van normale tekstvelden. Hierdoor kan er geen onderscheidende opmaak worden toegepast voor selectievakjes en tekstvelden. Precies op dit punt komen de attribuut-selectors van pas. Bekijk voor een beter begrip van hen het volgende voorbeeld:
<body> Naam: <input type="text" id="naam" /> <br /> Man: <input type="checkbox" name="geslacht" id="geslacht" /> <br /> Vrouw: <input type="checkbox" name="geslacht" id="geslacht" /> </body>
Hier werden verschillende formulierelementen gedefinieerd.
• een tekstveld
• twee selectievakjes
Deze velden moeten opgemaakt worden.
input {
border:3px solid #000;
width: 10em;
}Toegewezen aan de velden zijn een kader en een breedte.
Het probleem hierbij is: de gedefinieerde breedte moet eigenlijk alleen worden toegepast op het tekstinvoerveld, niet op de selectievakjes. Echter, met de element-selector is hier geen onderscheid mogelijk tussen de verschillende veldtypen. Om dit onderscheid te laten werken, wordt gebruik gemaakt van attribuutselectoren. Hier is een voorbeeld van hoe zoiets eruit kan zien:
input[type="checkbox"] {
width: auto;
}
Met de getoonde selector wordt eigenlijk alleen toegang verkregen tot die input-elementen die de attribuut-waarde-combinatie type="checkbox" hebben.
Herhalingen
CSS biedt nu eindelijk ook de mogelijkheid herhalingen aan te spreken. Natuurlijk is de vraag wat het nut hiervan kan zijn. Deze selectoren zijn bijvoorbeeld nuttig als je elke tweede rij van een tabel in een andere kleur wilt opmaken. Voordat ik de beschikbare selectoren presenteer, eerst een heel typisch voorbeeld:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Dit is een normale genummerde lijst. Met behulp van CSS moet nu elke derde lijstitem een achtergrondkleur krijgen.
Daarvoor wordt de selector nth-child() gebruikt. Met deze selector wordt elk n-de kind element aangesproken.
#sprachen li:nth-child(3n) {
background-color: red;
}
De volgende selectoren zijn beschikbaar:
• :root - Met behulp van de selector :root kun je de root van een document aanspreken.
• :nth-child(n) - Bestuurt elk n-de element binnen een ouder element. Deze selector is vooral handig wanneer meerdere elementen anders vormgegeven moeten worden. Het gaat hier om een vaststaand trefwoord waarop rekenkundige bewerkingen kunnen worden toegepast. n kan gelijkgesteld worden aan de waarde 1.
• :nth-last-child(n) - Bestuurt elk n-de element in een element, waarbij de kinderelementen van achteren worden doorlopen.
• :nth-of-type(n) - Bestuurt elk n-de element van hetzelfde HTML-type op hetzelfde niveau.
• :nth-last-of-type(n) - Bestuurt elk n-de element op hetzelfde niveau, waarbij de elementen van achteren worden doorlopen.
• :first-child - Bestuurt het eerste kind element binnen een element.
• :last-child - Bestuurt het laatste kind element binnen een element.
• :first-of-type - Bestuurt het eerste element van hetzelfde HTML-elementtype binnen een ouder element.
• :last-of-type - Bestuurt het laatste element van hetzelfde HTML-elementtype binnen een ouder element.
• :only-child - Bestuurt een element dat geen zusterelement heeft en het enige kind element in het bovenliggende element is.
• :only-of-type - Bestuurt een element dat geen zusterelementen van hetzelfde HTML-type heeft en dus het enige kind element van deze soort in het bovenliggende element is.
• :empty - Bestuurt lege elementen.
De gepresenteerde selectoren maken het werken met HTML aanzienlijk eenvoudiger, omdat complexe klassedefinities tot het verleden behoren.
