Selectors
1. Class selectors
2. ID selector
3. Pseudo Class selectors
1. Class selectors
Class selectors worden veel gebruikt in Style Sheets. Veronderstel dat we een paar <h1> tags in ons HTML document hebben die we een verschillende kleur willen geven. Als we dit gebruiken:
h1 { color:yellow; } dan zullen alle <h1> tags een gele kleur hebben. Maar wat als we een gele, blauwe en rode hoofding willen hebben? Om dit te doen gebruiken we "classes".
Een voorbeeld:
<head>
<style type="text/css">
.yellow { color:yellow; }
.blue { color:blue; }
.red { color:red; }
</style>
</head>
<body>
<h1 class="yellow">Hoofding</h1>
<h1 class="blue">Hoofding</h1>
<h1 class="red">Hoofding</h1>
</body> |
Geeft ons dit resultaat:
Hoofding
Hoofding
Hoofding |
NOTA 1:
Als je een 'class' definieert dan MOET ze voorafgegaan worden door een . (punt). De naam van de 'class' kan eender welke naam zijn. De naam van de 'class' die je aan de HTML tag toevoegd MOET dezelfde zijn als de naam die je aan de 'class' gegeven hebt in de Style Sheet! Dus, als je een 'class' zoals deze definieert:
.yellow { text-color:yellow; } dan MOET je dit gebruiken:
<h1 class="yellow">
NOTA 2:
Van zodra je een 'class' gedefinieerd hebt kan je hem gebruiken in verschillende HTML tags.
Een voorbeeld:
<head>
<style type="text/css">
.red { color:red; }
</style>
</head>
<body>
<h1 class="red">Hoofding</h1>
<em class="red">wat tekst hier</em>
<p class="red">Welkom op mijn pagina!</p>
</body>
|
Geeft ons dit resultaat:
Hoofding
wat tekst hier Welkom op
mijn pagina! |
NOTA 3:
'Classes' kunnen ook aan 1 enkel stijl element gegeven worden.
Bijvoorbeeld:
<head>
<style type="text/css">
h1.red { color:yellow; }
</style>
</head>
<body>
<h1>Deze hoofding is niet rood</h1>
<h1 class="red">Deze hoofding is wel geel</h1>
</body> |
Geeft ons dit resultaat:
Deze hoofding is niet rood
Deze hoofding is wel rood |
 top
2. ID selectors:
Verwant met class selectors. Het enige verschil is dat een ID voorafgegaan moet worden met een # in de style sheet terwijl de HTML tag het woord "ID" moet bevatten.
Een voorbeeld:
<head>
<style type="text/css">
#yellow { color:yellow; }
#blue { color:blue; }
#red { color:red; }
</style>
</head>
<body>
<h1 id="yellow">Hoofding</h1>
<h1 id="blue">Hoofding</h1>
<h1 id="red">Hoofding</h1>
</body> |
Resultaat:
Hoofding
Hoofding
Hoofding |
NOTA:
Als je een ID definieert dan MOET ze voorafgegaan worden door een #. De naam van de ID kan eender welke naam zijn. De naam van de ID die je aan de HTML tag toevoegd MOET dezelfde zijn als de naam die je aan de ID in de Style Sheet hebt gegeven!
Dus, als je een ID zoals deze definieert:
#yellow { text-color:yellow; }
dan MOET je dit gebruiken:
<h1 ID="yellow">.
Nota's 2 en 3 van de class selector zijn ook van toepassing op de ID selector!
top
3. Pseudo Class selectors: A:link A:visited A:hover A:active
Deze pseudo classes worden gebruikt voor het aanmaken van links (HTML tag:<a>). Ze laten je toe de links aan je wensen aan te passen.
Een voorbeeld:
<head>
<style type="text/css">
A:link { color: red; }
A:visited { color: blue; }
A:hover { color: green; }
A:active { color: lime; }
</style>
</head>
<body>
Bezoek mijn pagina door <a href="http://mijnadres.com">hier te klikken</a>
</body> |
Ziet er zo uit in je browser:
A:link { color: red; } betekent een rode link.
A:visited { color: blue; } betekent 'bezochte links' worden blauw.
A:hover { color: green; } zal de link groen maken als men er met de cursor overgaat.
A:active { color: lime; } zal de link lichtgroen maken als men er op klikt.
NOTA 1:
Je MOET deze pseudo classes in deze volgorde gebruiken!
NOTA 2:
De volgende vorm is ook geldig:
A:link { color: red; } = :link { color: red; }
A:visited { color: blue; } = :visited { color: blue; }
A:hover { color: green; } = :hover { color: green; }
A:active { color: lime; } = :active { color: lime; }
NOTA 3:
Deze pseudo classes kunnen ook tesamen met classes gebruikt worden. Veronderstel dat je groene en blauwe links op 1 pagina wil hebben.
Dan kunnen we dit zo doen:
<head>
<style type="text/css">
A.green:link { color: green; }
A.green:visited { color: red; }
A.green:hover { color: white; }
A.green:active { color: lime; }
A.blue:link { color: blue; }
A.blue:visited { color: red; }
A.blue:hover { color: lime; }
A.blue:active { color: white; }
</style>
</head>
<body>
Bezoek mijn pagina door <a class="green" href="http://mijnadres.com">hier te klikken</a> <br>
Maar je kan ook <a class="blue" href="http://mijnvriend.com">de pagina van mijn vriend</a>bezoeken.
</body> |
Ziet er zo uit:
top>
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
