Descendant selectors

Descendant selectors

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.

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

Het navigatiegedeelte

Het inhoudsgedeelte

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:

En de html-code wordt gewoon weer:

Nog een paar voorbeelden met daarbij een toelichting hoe het werkt.

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.


De tekst die tussen de p-tag staat in een sectie met id=”inhoud” wordt
schuin en krijgt een grijze achtergrond.


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.

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *