CSS klasse-selector

Beschrijving

De volgende stijlregel gebruikt een type-selector om alle tekst in paragraafelementen op de webpagina blauw te maken:

p
{
   color: #0000FF;
}

In het Marsman bloemlezing voorbeeld hebben we de achtergrondkleur van het section element ingesteld op LavenderBlush. De bloemlezing gebruiken we in de klas en we willen bepaalde tekst markeren als belangrijk en de leerlingen erop wijzen dat ze bijzondere aandacht moeten besteden aan de gemarkeerde tekst. De tekst kan een gedicht, een paragraaf of een zinsnede uit een paragraaf zijn.

We voegen een klasse toe in de CSS, .marked:

.marked{
   background-color: Yellow;
}

We passen de html aan en voegen de klasse marked toe als we een heel gedicht onder de aandacht willen brengen:

<section id="gedicht7" class="marked">
    <h2>Twee vrienden</h2>
    <p>De maan maakt de nacht tot een sneeuwwit veld.<br />
        een man heeft zijn vriend van zijn leven verteld:</p>
    <p>er is door dit spreken een wonder gebeurd:<br />
        hun harten zijn zozeer eender gekleurd</p>
    <p>dat de een als hij soms naar de ander ziet<br />
        bij zichzelve zegt: maar ben ìk dat niet?</p>
    <p>een vrouw; nog een vrouw; een verterend gemis.<br />
        het is alsof alles ten einde is:</p>
    <p>want één hart blijft thuis en één hart gaat op reis<br />
        maar geen van twee vindt het Paradijs.</p>
</section>

Maar we kunnen beslissen om slechts één paragraaf te markeren en niet het hele gedicht:

<section id="gedicht8">
    <h2>Aan de dood</h2>
    <p class="marked">Dood</p>
    <p>neem mij mee.<br />
        ik heb hier afgedaan.<br />
        ik wil op de rotsen te pletter slaan<br />
        en versplintren in open zee...<br />
        neem mij mee,<br />
        dood.</p>
</section>

Als we een zinsnede willen markeren sluiten we tekst in een span element en voegen de klasse marked eraan toe.

<section id="gedicht6">
    <h2>Polderland</h2>
    <p>Ik loop door ’t <span class="marked">polderland</span><br />
        onder de helle regen;<br />
        oneindig is het land,<br />
        oneindig zijn de wegen,</p>
    <p>die naar de kimmen gaan;<br />
        in lage hemelstreken<br />
        heerst tussen zwarte kreken<br />
        het mistig licht der maan.</p>
    <p>o, dertigstroomenland,<br />
        het volk dat u bewoont<br />
        versombert in krakelen<br />
        die geld en God verdelen,<br />
        purper en doornenkroon.</p>
    <p>oneindig is het land,<br />
        oneindig zijn de wegen<br />
        die naar de kimmen gaan;<br />
        ik loop de morgen tegen<br />
        in ’t mistig licht der maan.</p>
</section>

Gemarkeerde gedichten of paragrafen zijn nu goed te onderscheiden:

Daarmee wordt tekst in alle p elementen in het blauw gedrukt. Maar wat gebeurt er als erop de pagina een zijbalk staat met een blauwe achtergrond? Dan kan je tekst niet meer door het blauw zien. Je kan dan een klasse definiëren voor tekst in de zijbalk.

Om een paragraaf van de zijbalk klasse te maken voeg je eerst het klassenattribuut aan de openingstag toe:

<p class="zijbalk">
   Nu bidt vor mi, ic moet noch sneven<br />
   Ende in de weerelt liden pijn.<br />
   Verware mijn stede di beneven:<br />
   Ic moet noch zinghen een liedekijn;<br />
   Nochtan moet emmer ghestorven sijn.
</p>

Daarna voegen we in het stijlblad de stijlregel voor zijbalk klasse toe:

.zijbalk
{
color: #c0c0c0;
}

Die stijlregel gebruikt een class selector om aan te geven dat de stijlregel van toepassing is op alle elementen waarvan het class attribuut is ingesteld op zijbalk. Het punt geeft aan dat we een klasse definiëren en geen elementtype.

Je kan de klasse zijbalk ook op andere elementtypes toepassen. Als je een hyperlink in de zijbalk wil toevoegen kan je de klasse ervan als volgt aangeven:

<p class="zijbalk">
   Nu bidt vor mi, ic moet noch sneven<br />
   Ende in de weerelt liden pijn.<br />
   Verware mijn stede di beneven:<br />
   Ic moet noch zinghen een liedekijn;<br />
   Nochtan moet emmer ghestorven sijn.
   <a class="zijbalk"
      href="http://cf.hum.uva.nl/dsp/ljc/anoniem/egidius.html">
      Klik hier voor het volledige gedicht
   </a>
</p>