Met een type-selector kan je ervoor zorgen dat elk aangegeven element dat voorkomt in een document wordt opgemaakt.
Enkelvoudige type selectors
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
h1 { color:red }
p { color:green }
</style>
</HEAD>
<BODY>
<h1>Type-selectors</h1>
<p>Werken met type selectors</p>
<h1>Nog een hoofding niveau 1</h1>
<p>Nog een alinea</p>
</BODY>
</HTML>
Groeperen van type selectors
Je kan stijldeclaraties ook toepassen voor meerdere elementen tegelijk door selectors op te geven gescheiden door een komma.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
H1, H2, H3 { color: red; background-color: white;
font-family: sans-serif; }
H1 { font-size: 30px; }
H2 { font-size: 16px; }
H3 { font-size: 12px; margin-left:50px }
</style>
</HEAD>
<BODY>
<h1>Type-selectors</h1>
<h2>Deel1</h2>
<p>Werken met type selectors</p>
<h2>Deel2</h2>
<h1>Nog een hoofding niveau 1</h1>
<h2>Deel1</h2>
<p>Nog een alinea</p>
<h2>Deel2</h2>
<h3>Deel 2.1</h3>
<h3>Deel 2.2</h3>
</BODY>
</HTML>
Hier geven we eerst een algemene definitie voor H1, H2 en H3 waarna we deze drie elementen nog afzonderlijk verder aanvullen.
Descendant selectors
Bij een descendant selector wordt de stijldeclaratie enkel toegepast wanneer het element een descendant is van een of meerdere andere elementen. Dit doe je door de descendant te scheiden van de ancestor met behulp van een spatie.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
P I {color:red}
</style>
</HEAD>
<BODY>
<h1>De <i>schuine tekst</i> is niet rood</h1>
<p>Deze <i>schuine tekst</i> is wel rood</p>
</BODY>
</HTML>
Child selectors
Met child selectors ga je de descendant selector vernauwen: enkel children worden opgemaakt, geen verderliggende descendants.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
P > I {color:red}
</style>
</HEAD>
<BODY>
<h1>De <i>schuine tekst</i> is niet rood</h1>
<p>Deze <i>schuine tekst</i> is wel rood</p>
<p><b>Deze vette en <i>schuine tekst</i> is NIET rood</b></p>
</BODY>
</HTML>
Child selectors worden niet ondersteund in IE6.
Adjacent sibling selector
Een adjacent sibling selector gebruik je om een element op te maken dat onmiddelijk een ander element op hetzelfde niveau (sibling) volgt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
H1 + H2 {margin-top:-5mm}
</style>
</HEAD>
<BODY>
<h1>Hoofding 1</h1>
<p>Alinea
<h2>Hoofding 2 na alinea</h2>
<h1>Hoofding 1</h1>
<h2>Hoofding 2 na hoofding 1</h2>
</BODY>
</HTML>
Een H2 die onmiddellijk na een H1 komt in de boomstructuur van de pagina zal 5mm minder bovenmarge hebben dan een gewone H2.
Adjacent sibling selectors worden niet ondersteund in IE6.
Universele selector
De Universele selector kan je gebruiken wanneer je wenst te verwijzen naar alle elementen. De Universele selector wordt aangeduid met een asterisk (*).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
* {color:brown;}
</style>
</HEAD>
<BODY>
<h1>Hoofding 1</h1>
<p>Alinea
<h2>Hoofding 2</h2>
</BODY>
</HTML>
De universele selector wordt veel gebruikt in combinatie met class- en id-selectoren (zie later).
Overzicht element-selectors
notatie
beschrijving
Element {stijldeclaratie}
Type-selector: maak alle aangegeven elementen op
Element1, Element2,... {stijldeclaratie}
Groeperen van type-selectors: maak alle aangegeven elementen op
Element1 Element2 {stijldeclaratie}
Descendant-selector: maak alle aangegeven element2 op als die een descendant zijn van Element1
Element1 > Element2 {stijldeclaratie}
Child-selector: maak alle aangegeven element2 op als die een child zijn van Element1
Element1 + Element2 {stijldeclaratie}
Adjacent sibling-selector: maak alle aangegeven element2 op als die een adjacent sibling (opeenvolgende gelijke) zijn van Element1
* {stijldeclaratie}
Universele selector: beïnvloedt alle elementen
Attribuut-selectors
Met de invoering van CSS 2 werd het mogelijk stijlen te gebruiken wanneer aan bepaalde voorwaarden voor de element-attributen is voldaan.
IE6 ondersteunt geen enkele van deze mogelijkheden.
notatie
omschrijving
[attr] {stijldeclaratie}
Het attribuut moet aanwezig zijn
Element[attr] {stijldeclaratie}
Het attribuut moet aanwezig zijn in het aangegeven element
[attr]=waarde {stijldeclaratie}
Het attribuut moet een specifieke waarde hebben
Element[attr]=waarde {stijldeclaratie}
Het attribuut moet een specifieke waarde hebben in het aangegeven element
Wanneer het attribuut een tekenreeks kan bevatten met door spaties gescheiden woorden (zoals alt en title), dan plaats je een tilde (~) voor het gelijkheidsteken.
Class selectors
Wanneer een element het attribuut class bevat kan je aan dit element een stijl koppelen door gebruik te maken van een class-selector. Kenmerkend in de stijlregel is een punt (.) voor de naam van de class. Classnamen ken je zelf toe en zijn in principe hoofdlettergevoelig. Bepaalde browsers trekken zich van dit laatste echter niks aan.
notatie
beschrijving
*.classnaam {stijdeclaratie}
universele class selector: alle elementen met de aangegeven classnaam als waarde voor het attribuut class worden opgemaakt.
Element.classnaam {stijdeclaratie}
universele class selector: alle aangegven elementen met de aangegeven classnaam als waarde voor het attribuut class worden opgemaakt.
.classnaam1.classnaam2 {stijdeclaratie}
Het element moet de classnaam1 en classnaam2 in het attribuut class staan hebben. Deze classnamen worden in het attribuut class gescheiden door een spatie
Element.classnaam1.classnaam2 {stijdeclaratie}
Het aangegeven element moet de classnaam1 en classnaam2 in het attribuut class staan hebben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
H1 {color:red}
H1.schuin {font-style:italic;}
.leuk { color:green; background-color:#FFFF99; }
.klein {font-size:10pt; }
.wit.kader { color:white; border:solid 1px; background:red; }
</style>
</HEAD>
<BODY>
<h1>Hoofding 1</h1>
<p>Alinea met een <font class="leuk">leuk</font> woord
<h1 class="schuin">Schuine Hoofding 1 met een <font class="leuk">leuk</font> woord</h2>
<h2 class="wit kader">Hoofding 2 in een kader</h2>
<h2 class="klein wit kader">Kleine hoofding 2 in een kader</h2>
</BODY>
</HTML>
Id selectors
Wanneer een element het attribuut id bevat kan je aan dit element een stijl koppelen door gebruik te maken van een id-selector. Kenmerkend in de stijlregel is een spoorwegteken (#) voor de naam van de id. Idnamen ken je zelf toe en zijn in principe hoofdlettergevoelig. Bepaalde browsers trekken zich van dit laatste echter niks aan.
Het grote onderscheid met het gebruik van het attribuut class is dat voor het attribuut id slechts 1 element op de pagina aanwezig mag zijn met een specifieke id-waarde !
notatie
beschrijving
*#idwaarde
Universele id-selector: om het even welk element de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen
#idwaarde
Universele id-selector: om het even welk element de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen
Element#idwaarde
Universele id-selector: het aangegven element dat de aangegeven idwaarde heeft wordt opgemaakt. Opgepast: het specifieke id mag slechts 1 keer voorkomen
De id-selector heeft voorang op de class selector.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
H1 {color:red}
#hoofdstuk1 { background:yellow;}
p#test {font-size:14pt;}
p.klein {font-size:10pt; }
</style>
</HEAD>
<BODY>
<h1 id="hoofdstuk1">Hoofdstuk 1</h1>
<p>Alinea
<h1>Hoofdstuk2</h1>
<p class="klein">Kleine alinea
<p id="test" class="klein">Testalinea class klein
</BODY>
</HTML>
Pseudo-element selectors
Pseudo-element selectors staan je toe opmaak te definiëren voor bijvoorbeeld de eerste letter of de eerste regel van een bepaald element. Voor die eerste letter of regel bestaan geen specifiek elementen, maar je kan ze toch benaderen vanuit CSS, vandaar de naam pseudo-elementen.
notatie
beschrijving
Element:first-line
Maakt de eerste regel binnen een element op
Element:first-letter
Maakt de eerste letter binnen een element op
Element:before
Onmiddellijk voor een element bepaalde inhoud invoegen (niet ondersteund in IE6)
Element:after
Onmiddellijk na een element bepaalde inhoud invoegen (niet ondersteund in IE6)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus CSS - IVO Brugge</TITLE>
<style type="text/css">
p { width:150px; }
p:first-line {font-weight:bold;}
p:first-letter {font-size:24pt}
p.extra:first-letter {font-size:36pt;color:red}
h2:before { content:"(testhoofding:)" }
h2:after { content:"(einde testhoofding)" }
</style>
</HEAD>
<BODY>
<h1 id="hoofdstuk1">Hoofding 1</h1>
<p>Alinea met een beetje tekst om pseudo-elementen te demonstreren
<p class="extra">Nog een alinea met een beetje tekst om pseudo-elementen te demonstreren
<h2>Een testhoofding</h2>
</BODY>
</HTML>
Pseudo-class selectors
Een pseudo-class selector maakt het mogelijk stijlen te koppelen aan een element, maar niet op basis van een naam of attribuutwaarde. Je kan met behulp van pseudo-class selectors stijlen koppelen aan elementen naargelang acties die de gebruiker onderneemt.
notatie
beschrijving
A:link
Opmaak van een niet bezochte hyperlink
A:visited
Opmaak van een bezochte hyperlink
A:active
Opmaak van een actieve hyperlink
Element:hover
Opmaak van een element wanneer de gebruiker over het element beweegt met de muisaanwijzer. IE6 ondersteunt dit enkel voor A-elementen
Element:focus
Opmaak van een element wanneer het element het actieve element wordt. IE6 ondersteunt dit niet
Element:first-child
Opmaak van het eerste child van een element. IE6 ondersteunt dit niet
:lang(taalcode)
Element:lang(taalcode)
Opmaak volgens een speciefieke taalcode. Wordt gebruikt in combinatie met een attribuut-selector voor het attribuut lang. IE6 ondersteunt dit niet
