Uitleg positie, kleur, symbool, enz. in een lijst wijzigen

	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}

ul

Alle ongeordende lijsten. Dat zijn er zes, één voor elke serie (min of meer) bij elkaar horende serie voorbeelden.

width: 300px;

Een blok-element zoals een <ul> krijgt normaal genomen automatisch dezelfde breedte als zijn ouder. Dat is hier de body, die weer even breed is als het venster van de browser. Dus deze <ul>'s zouden even breed worden als het venster van de browser.

De erin liggende <li>'s zijn ook weer blok-elementen, en krijgen dus normaal genomen ook weer dezelfde breedte als hun ouder, dus de <ul> waar ze in liggen. Uiteindelijk worden deze dus ook even breed als het venster van de browser.

Bij sommige <li>'s is dat te breed. Het simpelste is om gewoon alle <ul>'s 'n bepaalde breedte te geven, dan hebben alle <li>'s die ook gelijk. Tenzij ik bij 'n bepaalde <li> 'n afwijkende breedte op zou geven.

margin: 20px 0 0 150px;

Aan de bovenkant 'n kleine marge van 20 px, zodat er tussen de verschillende <ul>'s wat afstand is.

Rechts en onder geen marge.

Links 'n marge van 150 px voor wat ruimte tussen de <ul>'s en de linkerkant van het venster van de browser.

padding: 0;

Verschillende browsers hebben verschillende standaard-instellingen. Door ze allemaal op 0 te zetten, ziet het er overal hetzelfde uit.

list-style-type: none;

De standaardsymbolen van een lijst zijn hier niet welkom.

ul#een li:before

Het eerste deel van de selector is gewoon normaal: elk lijst-item binnen de ul met id="een". Dat is de eerste lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de eerste lijst.

content: "\25cf";

Achter de eigenschap content komt datgene dat moet worden ingevoegd. Hier is dat een bolletje. Ik kan dat niet op 'n normale manier weergeven zoals 'n letter of 'n cijfer. Daarom gebruik ik de utf-code.

utf-8 is 'n soort tabel met volgnummers, waar alle letters van alle talen ter wereld in staan, en nog veel meer. Voor de nummering worden niet alleen cijfers, maar ook de letters a tot en met f gebruikt. Het volgnummer van 'n bolletje is 25cf. Andere symbolen, letters, cijfers, enz. hebben allemaal hun eigen volgnummer. De schuine streep voor het volgnummer geeft aan, dat dit 'n utf-8-code is.

Bij het gebruiken van dit soort symbolen moet je erop letten dat deze op elke computer zijn geïnstalleerd. Als je, ik noem maar wat, 'n runenteken zou nemen, zullen bijzonder weinig computers dat weer kunnen geven, omdat er geen font met runentekens is geïnstalleerd.

Als je echt geïnteresseerd bent in utf-8 kun je in dit artikel over utf-8 meer lezen.

margin: 0 100px 0 -100px;

Met behulp van de marge kan ik de precieze plaats van het bolletje opgeven.

Boven en onder gewoon op normale regelhoogte.

Met de marge van -100 px aan de linkerkant zet ik het bolletje 100 px terug naar links. Maar daardoor gaat ook de <li> daarachter 100 px naar links.

Met de marge rechts van 100 px zet ik de <li> weer 100 px naar rechts terug, terwijl het bolletje blijft staan. Hierdoor is uiteindelijk de inhoud van de <li> niet van plaats veranderd, maar het bolletje wel.

In Internet Explorer 8 verandert de marge niet mee met de lettergrootte, ook niet als je als eenheid em neemt. Bij zoomen verandert de marge wel gewoon. Dit is een van de kleine verschillen die tussen browsers bestaan.

color: green;

Voorgrondkleur groen. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee. Met alleen html zonder css is dit niet voor elkaar te krijgen.

ul#een li#een-dins:before

Het lijst-item met id="een-dins" binnen de ongeordende lijst met id="een".

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de tweede <li> uit zo'n serie van twee in de eerste lijst.

margin: 0 50px 0 -50px;

Bij margin: 0 100px 0 -100px; heb ik 'n marge opgegeven voor elke content binnen deze <ul>, dus ook voor deze. Hier overrule ik die eerdere marge door 'n nieuwe marge op te geven. Deze werkt precies hetzelfde als de eerdere, alleen de maten zijn anders. Uitleg bij de eerste marge.

color: red;

Voorgrondkleur rood. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

ul#een li#een-woens:before

Het lijst-item met id="een-woens" binnen de ongeordende lijst met id="een".

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de derde <li> uit de serie van drie in de eerste lijst.

margin: 0;

Bij margin: 0 50px 0 -50px; heb ik 'n marge opgegeven voor elke content voor de tweede <li> uit de serie li+li binnen deze <ul>, dus ook voor deze. Hier overrule ik die eerdere marge door 'n nieuwe marge op te geven.

De hele marge wordt hier verwijderd, waardoor het bolletje tegen de inhoud van de <li> aan komt te staan.

color: blue;

Voorgrondkleur blauw. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

li#twee-maan:before

Het eerste deel van de selector is gewoon normaal: het lijst-item met id="twee-maan". Dit is het lijst-item met 'maandag' binnen de tweede <ul>.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="twee-maan".

content: "\25ba";

Driehoekje voor het lijst-item zetten. Voor verdere uitleg zie content: \"25cf";

font-size: 0.6em;

Driehoekje iets kleiner maken. Omdat het 'n gewoon teken uit 'n font is, net als 'n normale letter, kan ik de grootte veranderen met de lettergrootte.

Ondanks het gebruik van de eenheid em verandert het driehoekje niet van grootte in Internet Explorer 8 als ik de lettergrootte verander. De inhoud van het lijst-item verandert wel gewoon. Bij zoomen verandert de grootte in Internet Explorer 8 ook gewoon.

li#twee-dins:before

Het eerste deel van de selector is gewoon normaal: het lijst-item met id="twee-dins" Dit is het lijst-item met 'dinsdag' binnen de tweede <ul>.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="twee-dins".

content: "\25cf";

Rondje voor het lijst-item zetten. Voor? Ben ik dan kippig? Nee hoor, je ziet 't goed: hieronder verplaats ik hem met behulp van margin naar achter het lijst-item. Voor verdere uitleg zie content: \"25cf";

margin: 0 -0.89em 0 0.45em;

Met behulp van de marge kan ik de precieze plaats van het bolletje opgeven.

Boven en onder gewoon op normale regelhoogte.

Het bolletje wordt eerste gewoon normaal voor de <li> gezet.

Met de marge van 0.45em aan de linkerkant wordt het 0.45 em naar rechts gezet. Maar daardoor gaat ook de <li> daarachter 0.45 em naar rechts mee.

Zowel bolletje als <li> staan dus nu 0.45 em naar rechts, gewoon naast elkaar.

Nu geef ik de rechtermarge van het bolletje 'n negatieve waarde van -0.89 em. Hierdoor wordt de erachter staande <li> 0.89 em naar links getrokken, waardoor de <li> in het midden onder het bolletje komt te staan. Maar het bolletje zelf blijft gewoon staan. Hierdoor komt de <li> over het bolletje te staan.

Met 'n waarde van -0.89 blijkt de tekst van alle <li>'s netjes uitgelijnd onder elkaar te komen.

color: red;

Voorgrondkleur rood. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

font-size: 3em;

Bolletje stuk groter maken. Omdat het 'n gewoon teken uit 'n font is, net als 'n normale letter, kan ik de grootte veranderen met de lettergrootte.

Ondanks het gebruik van de eenheid em verandert het bolletje niet van grootte in Internet Explorer 8 als ik de lettergrootte verander. De inhoud van het lijst-item verandert wel gewoon. Bij zoomen verandert de grootte in Internet Explorer 8 ook gewoon.

line-height: 0.3em;

De regelhoogte is gekoppeld aan de lettergrootte. En omdat die hier 3 em is, zou dat 'n enorme regelhoogte opleveren. Door hem weer terug te brengen tot ongeveer ⅓ komen we uiteindelijk uit op 'n ongeveer normale regelhoogte.

vertical-align: top;

Tekst op de goede hoogte zetten ten opzichte van het bolletje.

ul#twee li+li+li:before

Het eerste deel van de selector is gewoon normaal: elk lijst-item dat gelijk volgt op 'n lijst-item dat ook weer gelijk volgt op 'n lijst-item binnen de ul met id="twee". Dit is de tweede lijst.

li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

Elke <li> die gelijk op een andere <li> volgt, die ook weer op 'n andere volgt, dus de derde, vierde, enz. Er mag geen enkel ander element tussen de drie <li>'s zitten.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de derde <li> uit 'n serie van drie in de tweede lijst.

content: "\25c4";

Driehoekje voor het lijst-item zetten. Voor? Jazeker, maar hieronder verplaats ik hem met behulp van margin naar de achterkant van het lijst-item. Voor verdere uitleg zie content: \"25cf";

margin: 0 -6.5em 0 6em;

Met behulp van de marge kan ik de precieze plaats van het driehoekje opgeven.

Boven en onder gewoon op normale regelhoogte.

Het driehoekje wordt eerst gewoon normaal voor de <li> gezet.

Met de marge van 6em aan de linkerkant wordt het 6 em naar rechts gezet. Maar daardoor gaat ook de <li> daarachter 6 em naar rechts mee.

Zowel driehoekje als <li> staan dus nu 6 em naar rechts, gewoon naast elkaar.

Nu geef ik de rechtermarge van het driehoekje 'n negatieve waarde van -6.5 em. Hierdoor wordt de erachter staande <li> 6.5 em naar links getrokken, waardoor de <li> vóór het driehoekje komt te staan. Maar het bolletje zelf blijft gewoon staan. Hierdoor komt de <li> voor het bolletje te staan.

Met 'n waarde van -6.5 blijkt de tekst van alle <li>'s netjes uitgelijnd onder elkaar te komen.

In Internet Explorer 8 verandert de marge niet mee met de lettergrootte, ondanks het gebruik van em als eenheid. Bij zoomen verandert de marge wel gewoon. Dit is een van de kleine verschillen die tussen browsers bestaan.

color: blue;

Voorgrondkleur blauw. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

ul#drie li:before

Het eerste deel van de selector is gewoon normaal: elk lijst-item binnen de ul met id="drie". Dat is de derde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de derde lijst.

content: "a";

Achter de eigenschap content komt de letter die moet worden ingevoegd, tussen aanhalingstekens.

margin-right: 8px;

Kleine marge rechts voor wat afstand tussen de 'a' en de erachter staande <li>'s.

ul#drie li:first-letter

De eerste letter in de <li>'s binnen de ul met id="drie".

Dit is de enige <ul> waar ik de opmaak met behulp van :first-letter kan opgeven, bij de andere <ul>'s werkt dat niet, daar moet ik de opmaak opgeven met behulp van :before. Waarom dat zo is, weet ik eigenlijk niet. Mogelijk omdat dit de enige <ul> is waar content 'n gewone letter bevat en geen utf-8-code.

color: red;

Voorgrondkleur rood. Dit is onder andere de kleur van de tekst.

font-style: italic;

Cursief.

ul#drie li+li:first-letter

li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

De eerste letter van elke <li> die gelijk op een andere <li> volgt binnen de ul met id="drie", dus de eerste letter van de tweede <li>, de eerste letter van de derde <li>, enz. Er mag geen enkel ander element tussen de beide <li>'s zitten.

color: silver;

Voorgrondkleur zilver. Dit is onder andere de kleur van de tekst.

text-decoration: underline;

Onderstrepen.

ul#drie li+li+li:first-letter

li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

De eerste letter van elke <li> die gelijk op een andere <li> volgt die ook weer op 'n <li> volgt binnen de ul met id="drie", dus de eerste letter van de derde <li>, de eerste letter van de vierde <li>, enz. Er mag geen enkel ander element tussen de drie <li>'s zitten.

background: white;

Witte achtergrond.

border: black solid 1px;

Zwart randje om de letter.

ul#vier li:before

Het eerste deel van de selector is gewoon normaal: elk lijst-item binnen de ul met id="vier". Dat is de vierde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de vierde lijst.

content: "\25d9\2192";

Er worden twee tekens voor het lijst-item gezet. Voor de rest werkt dit hetzelfde als steeds bij content. Voor verdere uitleg zie content: \"25cf";

display: inline-block;

content is een inline-element. Daardoor kan ik een aantal eigenschappen als width en text-align niet gebruiken. Hiermee blijft het 'n inline-element, begint niet op 'n nieuwe regel, maar ik kan toch breedte en dergelijke gebruiken.

Ook dit wordt niet vaak gebruikt omdat, het wordt eentonig, Internet Explorer 6 en 7 het vrijwel onbruikbaar maken door een verkeerde implementatie.

margin: -1px 3px 0 0;

Dubbele stippellijn tussen twee blokjes.

Rondom dit blokje staat een stippellijn van 1 px dik. Omdat de blokjes tegen elkaar aan staan, komt er tussen twee aangrenzende blokjes dus 'n dubbele stippellijn te staan, zoals hiernaast is te zien.

Als ik nu de blokjes 1 px omhoog zet, komen de tegen elkaar aanstaande lijntjes van 1 px dik precies over elkaar te staan, en zie je overal 'n lijntje van maar 1 px dik. In dit geval verschuift de <li> mee naar boven. De reden daarvan staat hier gelijk onder bij border.

border: dotted black 1px;

Stippellijn rondom het hele blokje. En omdat dit geen 'normaal' symbool of zo bij een lijst is, krijgt de <li> geen stippellijn.

content is een inline-element. Dat ik het hierboven heb veranderd in een inline-block, maakt geen verschil: het blijft een inline-element, alleen kan ik eigenschappen als breedte gebruiken. Dat is het verschil tussen display: inline-block; en display: block; waarmee ik het in 'n gewoon blok-element zou veranderen.

Daardoor heeft content invloed op de regelhoogte, ook van de op dezelfde regel staande <li>. De regelhoogte wordt dus verhoogd met 2 px voor de border aan boven- en onderkant.

Hier gelijk boven verplaats ik de blokjes weer 1 px omhoog om 'n dubbele stippellijn in het midden te voorkomen. Ook hier schuift de <li> weer 1 px mee omhoog. De totale toename van de regelhoogte is dus uiteindelijk maar 1 px.

width: 80px;

Breedte. En omdat dit geen 'normaal' symbool of zo bij een lijst is, heeft dit geen invloed op de breedte van de <li>.

text-align: center;

Tekst horizontaal in het midden zetten. Omdat de twee hier gebruikte tekens gewoon in 'n font zitten, net als normale letters, werkt dit ook voor deze tekens. En omdat dit geen 'normaal' symbool of zo bij een lijst is, wordt de tekst in de <li> niet gecentreerd.

background: white;

Witte achtergrond. En omdat dit geen 'normaal' symbool of zo bij een lijst is, verandert de achtergrond van de <li> niet mee.

ul#vijf li:before

Het eerste deel van de selector is gewoon normaal: elk lijst-item binnen de ul met id="vijf". Dat is de vijfde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de vijfde lijst.

content: "\00a9";

Copyright-teken voor het lijst-item zetten. Omdat dit binnen content staat, kan ik geen © gebruiken, maar moet ik de utf-8-code gebruiken. Voor verdere uitleg zie content: \"25cf";

margin-right: 8px;

Kleine afstand tussen copyright-teken en de ernaast staande <li>.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Verderop geef ik sommige <li>'s 'n kleur. Daardoor verandert de kleur van de ervoor staande content mee. Maar dat kan ik weer overrulen door de content zelf 'n kleur te geven.

li#vijf-maan

Het lijst-item met id="vijf-maan". Dit is het lijst-item met 'maandag' in de vijfde <ul>.

color: red;

Voorgrondkleur rood. Dit is ondere andere de kleur van de tekst. Om te voorkomen dat de ervoor staande content ook rood wordt, heb ik die bij ul#vijf li:before een eigen kleur gegeven.

li#vijf-dins

Het lijst-item met id="vijf-dins". Dit is het lijst-item met 'dinsdag' in de vijfde <ul>.

color: white;

Voorgrondkleur wit. Dit is onder andere de kleur van de tekst.

background: black;

Achtergrond zwart maken.

ul#vijf li#vijf-dins:before

Het eerste deel van de selector is gewoon normaal: het lijst-item met id="vijf-dins" binnen de ul met id="vijf". Dit is het lijst-item met 'dinsdag' binnen de vijfde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="vijf-dins" in de vijfde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#vijf li:before gedaan. Hier geef ik alleen wat extra opmaak.

color: white;

Voorgrondkleur wit, waardoor ook het copyright-teken wit wordt. Ik heb hierboven bij li#vijf-dins de voorgrondkleur van de <li> wit gemaakt. Normaal genomen zou dan de tekstkleur van de ervoor staande content ook wit worden. Maar bij ul#vijf li:before heb ik 'n zwarte kleur gegeven aan de voor <li>'s in de vijfde lijst staande content. En die selector heeft meer gewicht dan ul#vijf-dins, dus moet ik hier specifiek aan deze content weer 'n witte kleur geven.

ul#vijf li+li+li

Een serie van drie opeenvolgende <li>'s binnen de ul met id="vijf". De enige <li> die hieraan voldoet is de <li> met 'dinsdag' in de vijfde lijst.

li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

Elke <li> die gelijk op een andere <li> volgt, die ook weer op 'n andere volgt, dus de derde, vierde, enz. Er mag geen enkel ander element tussen de drie <li>'s zitten.

color: blue;

Voorgrondkleur blauw. Dit is onder andere de kleur van de tekst.

ul#zes

De ul met id="zes". De zesde lijst.

counter-reset: teller;

Hiermee wordt een teller aangemaakt met de naam 'een'. Omdat ik geen begingetal opgeef, wordt de teller geïnitialiseerd op 0.

ul#zes li

De <li>'s binnen de ul met id="zes". Det lijst-items binnen de zesde lijst.

counter-increment: een;

Verhoog de hier gelijk boven aangemaakte teller met de naam 'een'. Omdat ik geen waarde opgeef, wordt gewoon met 1 verhoogd. De teller was geïnitialiseerd op 0. Omdat hij wordt verhoogd voordat hij wordt getoond, staat hij dus netjes op 1 als hij voor 't eerst wordt getoond.

ul#zes li:before

Het eerste deel van de selector is gewoon normaal: elk lijst-item binnen de ul met id="zes". Dit is de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li>'s in de zesde lijst.

content: "a-" counter(een);

Achter content: komt te staan wat er moet worden ingevoegd. Allereerst is dat de letter a gevolgd door een afbreekteken. Omdat dit letterlijk moet worden ingevoegd, staat het tussen aanhalingstekens.

Daarachter moet de teller met de naam 'een', die hierboven is aangemaakt, komen te staan. Deze teller wordt automatisch bij elke ul#zes li, dus bij elk lijst-item uit de zesde lijst, verhoogd. Achter de 'a-' komt dus een getal te staan.

In plaats van 'n getal kun je ook 'n letter of 'n Romeins cijfer of zo laten weergeven, maar omdat ik hier verder niets opgeef wordt de standaardteller gebruikt: een getal.

margin-right: 10px;

Kleine afstand tussen teller en <li>.

li#zes-maan:before

Het eerste deel van de selector is gewoon normaal: het lijst-item met id="zes-maan". Dit is de <li> met 'maandag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-maan" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

text-decoration: overline;

Streep boven inhoud van content zetten. En omdat dit geen 'normaal' symbool bij een lijst is, krijgt de inhoud van de <li> geen streep.

li#zes-dins:before

Het eerste deel van de selector is gewoon normaal: het lijst-item met id="zes-dins". Dit is de <li> met 'dinsdag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-dins" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

font-style: italic;

Inhoud van content cursief weergeven. En omdat dit geen 'normaal' symbool bij een lijst is, wordt de inhoud van de <li> niet cursief.

color: red;

Voorgrondkleur rood. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

li#zes-woens

Het lijst-item met id="zes-woens". Dit is het lijst-item met 'woensdag' uit de zesde lijst.

color: brown;

Voorgrondkleur bruin. Dit is onder andere de kleur van de tekst.

li#zes-woens:before

Het eerste deel van de selector is gewoon normaal: het lijst-item met id="zes-woens". Dit is de <li> met 'woensdag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-woens" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

color: blue;

Voorgrondkleur blauw. Dit is onder andere de kleur van de tekst. En omdat dit geen 'normaal' symbool bij een lijst is, verandert de kleur van de inhoud van de <li> niet mee.

font-weight: bold;

Vet. En omdat dit geen 'normaal' symbool bij een lijst is, wordt de inhoud van de <li> niet vet.

ul#zes li#zes-don:before

Het eerste deel van de selector is gewoon normaal: het lijst-item met id="zes-don" binnen de ul met id="zes". Dit is de <li> met 'donderdag' binnen de zesde lijst.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de <li> met id="zes-don" in de zesde lijst.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

Deze selector is langer dan die van de andere <li>'s in de zesde lijst: er staat ul#zes voor, en bij de andere niet.

Bij ul#zes li:before heb ik een marge opgegeven voor alle <li>'s binnen de zesde lijst. Alleen deze <li> moet een afwijkende marge krijgen. Als ik als selector alleen li#zes-don:before neem, heeft hij te weinig gewicht om ul#zes li:before te overrulen. Door er ul#zes aan toe te voegen, krijgt hij genoeg gewicht.

margin: 0 40px 0 -30px;

Met behulp van de marge kan ik de precieze plaats van de teller opgeven.

Boven en onder gewoon op normale regelhoogte.

De teller wordt eerst gewoon normaal voor de <li> gezet.

Met de marge van -30px aan de linkerkant wordt de teller 30 px naar links gezet. Maar daardoor gaat ook de <li> daarachter 30 px naar links mee.

Zowel teller als <li> staan dus nu 30 px naar links, gewoon naast elkaar.

Nu geef ik de rechtermarge van de teller 'n waarde van 40px. Hierdoor wordt de <li> 40 px naar rechts verplaatst, terwijl de teller gewoon blijft staan. Deze teller komt hierdoor dus links van alle andere tellers te staan, terwijl de <li> gewoon is uitgelijnd met de andere <li>'s.

font-style: italic;

Cursief. En omdat dit geen 'normaal' symbool bij een lijst is, wordt de inhoud van de <li> niet cursief.

ul#zes li+li+li+li+li:before

Het eerste deel van de selector is gewoon normaal: elk lijst-item dat gelijk volgt op 'n lijst-item dat ook weer gelijk volgt op 'n lijst-item en dit nog twee maal, binnen de ul met id="zes". Dit is de zesde lijst.

li+li+li+li+li is 'n iets minder bekende selector, omdat Internet Explorer 6 de + niet kent en Internet Explorer 7 hem niet goed uitvoerde. Omdat deze twee fossielen sowieso niet met dit voorbeeld overweg kunnen, hebben we er geen last van en kunnen we dit dus gewoon gebruiken.

Elke <li> die gelijk op een andere <li> volgt, en dit nog drie keer. Dus de vijfde, zesde, enz. Er mag geen enkel ander element tussen de vijf <li>'s zitten.

:before is een zogenaamd pseudo-element. Het geeft de plaats aan waar iets moet worden ingevoegd. Dat moet gebeuren vóór het element waar het achter staat, dus voor de vijfde <li> uit 'n serie.

In dit geval voeg ik niets in, want dat heb ik al bij ul#zes li:before gedaan. Hier geef ik alleen wat extra opmaak.

text-decoration: overline underline;

Lijntje boven en onder de teller zetten. En omdat dit geen 'normaal' symbool bij een lijst is, krijgt de inhoud van de <li> de lijntjes niet.

Speciaal voor Internet Explorer 6 en 7

< !--[if (IE 6) | (IE 7)]> <style type="text/css"> ul {padding-left: 20px; list-style-type: disc;} ul#drie li:first-letter {font-style: normal; color: black;} ul#vijf li, li#zes-woens {color: black; background: none;} ul#drie li+li:first-letter, ul#drie li+li+li:first-letter, ul#vijf li+li+li {border: 0; color: black; text-decoration: none; background: none;} </style> <![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 6 en 7 (het verticale streepje betekent 'of'), maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if (IE 6) | (IE 7)]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 6 en 7 in. De css voor Internet Explorer 6 en 7 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if (IE 6) | (IE 7)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

Internet Explorer 6 en 7 herkennen beide content en :before niet, dus negeren ze dat. Hierdoor werkt dit voorbeeld bij geen van beide.

Maar sommige regels van de css worden wel herkend, bijvoorbeeld 'n andere voorgrondkleur voor 'n bepaalde <li>. Dat moet hier dus worden uitgeschakeld.

Internet Explorer 6 herkent ook + in 'n selector niet en negeert die ook. Dus voor Internet Explorer 6 hoeft iets minder te worden uitgeschakeld.

Maar omdat dit voorbeeld niet werkt in Internet Explorer 6 én 7 en ze gedeeltelijk dezelfde correcties nodig hebben, combineer ik de css voor deze beide fossielen gewoon. Dat er dan voor Internet Explorer 6 meer in staat dan nodig is, is geen probleem.

Feitelijk zou ik vrijwel alle selectors in één regel kunnen zetten. Maar zodra er :first-letter binnen een selector staat, negeert Internet Explorer 6 alle andere selectors in dezelfde regel. Dus moet ik 'n aantal aparte regels maken.

ul

Alle ongeordende lijsten.

padding-left: 20px;

In de algemene css is de padding op 0 gezet. Daardoor is er geen ruimte voor 'n symbool, dus die maak ik hier.

list-style-type: disc;

'n Rondje voor elke <li> zetten. Ik kan natuurlijk ook 'n getal of letter nemen. Mogelijk moet je dan wel 'n grotere padding-left geven.

ul#drie li:first-letter

De eerste letter van het lijst-items in de lijst met id="drie". Dat is de derde lijst.

font-style: normal; color: black;

In de algemene css zijn deze eigenschappen veranderd, hier weer terug naar normaal.

ul#vijf li, li#zes-woens

De lijst-items in de ul met id="vijf" (de vijfde lijst) en het lijst-item met id="zes-woens" (het lijst-item met 'woensdag' in de zesde lijst).

color: black; background: none;

In de algemene css zijn deze eigenschappen veranderd, hier weer terug naar normaal.

ul#drie li+li:first-letter, ul#drie li+li+li:first-letter, ul#vijf li+li+li

li+li wil zeggen: twee <li>'s gelijk achter elkaar, zonder iets ertussen. li+li+li idem, maar dan drie.

Dus elke serie van twee of drie <li>'s achter elkaar in de ul met id="drie" (de derde lijst) en elke serie van drie <li>'s achter elkaar in de ul met id="vijf" (de vijfde lijst).

border: 0; color: black; text-decoration: none; background: none;

In de algemene css zijn deze eigenschappen veranderd, hier weer terug naar normaal.