Descendant selectors

door Kris Bergstra · 4 april 2007

Wanneer je gebruik gaat maken van CSS zul je op een gegeven moment te maken krijgen
met descendant selectors. Wat zijn dit eigenlijk? In dit artikel willen we aan de hand van voorbeelden
aangeven hoe je dit kunt gebruiken.

Wanneer je een website maakt zul je er goed aan doen om je pagina logisch op te zetten. Daarmee voorkom je een
hoop problemen en je kunt van allerlei handigheidjes met betrekking tot CSS gebruik gaan maken. We nemen weer
het voorbeeld van de pagina die we hadden gemaakt in dit artikel.

<br /> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”<br /> “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”></p> <p><html xmlns=”http://www.w3.org/1999/xhtml”><br /> <head><br /> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><br /> <title>Hier komt de titel</title><br /> <link rel=”stylesheet” type=”text/css” href=”jouw_stijl_blad.css” /><br /> </head><br /> <body><br /> <div id=”kop”>Titel van de website</div><br /> <div id=”navigatie”>Home<br />Pagina 2<br />Pagina 3</div><br /> <div id=”inhoud”><br /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing<br /> elit. Aenean nec nunc vitae tellus elementum scelerisque.</p><br /> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra,<br /> per inceptos hymenaeos. <a href=”link”>Lees verder</a><br /> Mauris mollis justo nec est. Nunc eget dui vitae libero viverra mollis. <a href=”link2″>Lees verder</a><br /> </p><br /> </div><br /> <div id=”footer”>© 2005 bladiebla</div><br /> </body><br /> </html>

Zoals je ziet wordt
de pagina verdeeld in een aantal logische onderdelen, de kop, de navigatie, de inhoud en de footer. Deze krijgen een
unieke naam aangegeven door id. Een id kan maar een keer voorkomen op een pagina. Wanneer je nu en in de navigatie
en in de inhoud links gaat plaatsen met <a href=”link.htm”> dan zul je iedere keer dezelfde layout voor de
link krijgen. Een veelgemaakte beginnersfout is dat je iedere link een class mee gaat geven. Dit is op zich niet verkeerd,
maar het kan gemakkelijker. Een voorbeeld. We willen de links in de navigatie rood maken en de links in de tekst
(id=”inhoud”) willen we blauw hebben. Met class krijg je dan dit:

Het stijlblad
<br /> a.blauw {color: blue;}<br /> a.rood {color: red;}

Het navigatiegedeelte
<br /> <a href="link.htm" class="rood">Home</a><br /> <a href="link2.htm" class="rood">Pagina 2</a><br /> <a href="link3.htm" class="rood">Pagina 3</a>

Het inhoudsgedeelte
<br /> <a href="link2.htm" class="blauw">Lees verder</a><br /> <a href="link3.htm" class="blauw">Lees verder</a>

Maar met deze manier van werken had de font-tag natuurlijk niet hoeven worden afgeschaft. Vandaar dat er een handigere
manier is in CSS. En nu komen we bij de descendant selector. In ons voorbeeld heeft de navigatie het id=”navigatie” gekregen.
Nu kun je met behulp van de descendant selector, de tag die moet wijzigen in de context plaatsen. Dus alle links die in het
navigatiedeel staan worden rood en de links in de inhoud worden blauw door het volgende te doen:

<br /> #navigatie a {color: red;}<br /> #inhoud a {color: blue;}

En de html-code wordt gewoon weer:

</p> <div id="navigatie"> <a href="link.htm">Home</a><br /> <a href="link2.htm">Pagina 2</a><br /> <a href="link3.htm">Pagina 3</a> </div> <p>

Nog een paar voorbeelden met daarbij een toelichting hoe het werkt.
<br /> td b {font-size: 20px; color: green;}
Elke tekst tussen de <b>-tags die in een tabelcel staat,
wordt 20 pixels groot en heeft als kleur groen. De tekst die daarbuiten staat is dat niet.

<br /> #inhoud p {font-style: italic; background-color: grey;}
De tekst die tussen de p-tag staat in een sectie met id=”inhoud” wordt
schuin en krijgt een grijze achtergrond.

<br /> table#inhoud td a {font-weight: bold; color: blue;}
De links in een tabelcel worden blauw en vetgedrukt, maar dan alleen in een tabel met als id=”inhoud”.
In een tabel met een andere naam gebeurt er dus niets.

Descendant selectors

Geef een reactie Reactie annuleren