Cursus CSS - Les 3: Selectors

Hiervoor hebben we maar 1 element gebruikt als selector, maar je kunt nog veel nauwkeuriger aangeven over op welke elementen de opmaak van toepassing moet zijn. Je kunt bijvoorbeeld ook meerdere selectors gebruiken, door ze te scheiden met een komma:

Dit zal alle h1 en h2-tags rood maken. Soms wil je misschien niet alle elementen selecteren, maar bijvoorbeeld alleen de links in het menu. Dat kan ook, door een class te gebruiken. Je geeft een element een class met het class-attribuut: Vervolgens kun je met de volgende stylesheet de links uit het menu wat groter en groen maken: (klik hier om dit voorbeeld te bekijken)
Een class kan je in CSS dus aangeven met een punt (.). Dit is een goede oplossing voor een menu van 3 linkjes, maar als je een wat groter menu hebt, is het makkelijker om het als volgt te doen: Met als stylesheet: (klik hier om dit voorbeeld te bekijken)
Hier hebben we een andere manier van selecteren gebruikt: niet met een class, maar met een id. Een class mag je meerdere keren gebruiken (bijvoorbeeld voor alle linkjes in het menu), terwijl je een id maar 1 keer mag gebruiken per pagina (bijvoorbeeld voor het menu). Een id geef je aan een element met het id-attribuut, zoals je zag in het voorbeeldje: "<div id="menu">". We hebben een div-element gebruikt om het menu in te zetten. Het div-element is speciaal voor CSS ontworpen om elementen die bij elkaar horen in te zetten. Je kunt ook een span-element gebruiken, dat is bijna hetzelfde als een div-element, met als verschil dat een div-element automatisch een enter toevoegt en een span-element niet. In een stylesheet kun je een ID aangeven met een hekje (#), zoals je zag in de regel div#menu Na "div#menu" zien we een spatie, en dan een a. Die a staat voor het a-element, dus een hyperlink. De selector "div#menu a" betekent: alle hyperlinks binnen het div-element dat als ID "menu" heeft. Met andere woorden: alle hyperlinks in het menu. Nu hoef je niet iedere hyperlink in het menu de class "menu" te geven.

Verder kun je ook als element een asterisk (een sterretje, *) gebruiken om de CSS-code op alle elementen toe te passen.

Pseudo-classes

Je kunt ook bijvoorbeeld elementen een andere opmaak geven als je er met de muis overheen gaat. Dat doe je met pseudo-classes. Hier een voorbeeldje dit wordt de hyperlink:

We gebruiken dezelfde HTML-code als in het vorige voorbeeldje: (klik hier om dit voorbeeld te bekijken)
Als je nu de muis over een link beweegt, zie je dat hij van kleur veranderd. We gebruiken hier de pseudo-class "hover". Een pseudo-class plaats je door een : (dubbele punt) achter de selector te zetten. Er zijn nog meer pseudo-classes:

:first-child	Het eerste element binnen dat element. Bijvoorbeeld "div#menu a:first-child" selecteert het eerste linkje in het menu. Jammergenoeg wordt deze selector nog lang niet door iedere browser ondersteund...
:link	Selecteert alleen onbezochte links
:visited	Selecteert alleen bezochte links
:hover	Selecteert elementen waar de muis overheen gaat
:active	Selecteert actieve elementen. Een element is bijvoorbeeld actief wanneer de gebruiker de muisknop indrukt op dat element, totdat hij de muisknop weer loslaat
:focus	Selecteert elementen die de focus hebben (bijvoorbeeld met de tab-toets kun je ze de focus geven)

Dat zijn wel de belangrijkste, maar er zijn er nog meer die wat minder vaak gebruikt worden (en ook slechter ondersteund worden door de browsers), zoals:

• :first-letter
• :first-line
• :lang
• :before
• :after

Kort samengevat:

• Je kunt meerdere selectors groeperen door ze te scheiden met een komma (,): "h1, h2 { eigenschap: waarde; }"
• Je kunt classes maken door met het attribuut "class", en ze in CSS gebruiken met een punt (.): "a.menu { eigenschap: waarde; }"
• Je kunt elementen groeperen met een div of een span-element
• Je kunt een element een ID geven met het ID-attribuut en die in CSS gebruiken met een hekje (#): "div#menu { eigenschap: waarde; }"
• Je kunt pseudo-classes gebruiken met een dubbele punt (:): "a:hover { eigenschap: waarde; }"

Je weet nu hoe je CSS-code kunt toepassen op de HTML-elementen waarop jij het wilt. In de volgende les leer je eigenschappen om tekst op te maken met CSS.

⇒ Ga verder met Les 4: Tekst
← Ga terug naar Les 2: Syntax
↵ Terug naar de CSS-cursuss

---