De volgende versie en meer mogelijkheden


Met CSS 2.1 zijn de mogelijkheden al voor een heel deel uitgewijder dan enkel de class en id selector, daarom deze lijst om ze allemaal op een rijtje te zetten.

  1. universal selector
  2. grouping selector
  3. descendant selector
  4. child selectors
  5. adjacent sibling selector
  6. attribute selector
  7. class selector
  8. id selector
  9. :first-child pseudoclass
  10. :link :visited :hover :active en :focus pseudoclasses
  11. :lang pseudoclasses
  12. :first-line pseudoelement
  13. :first-letter pseudoelement
  14. :before en :after pseudoelementen

Den uitleg met voorbeelden enzo

universal selector

De universal selector * geldt voor elk element in jeXHTML, dus als je iets bepaald met de universal selector, dan heeft elk HTML element deze waarde via CSS:

* {
padding: 0;
margin: 0;
}

Met deze regel worden alle marges en paddings op nul gezet, dit is uiterst handig als je crossbrowsers wilt stylen, want nu zijn alle standaard waarden van margin en padding gelijkgezet voor elke browser.

grouping selector

Je kan dezelfde style bepaling toekennen aan verschillende HTML elementen:

strong, em, .nota {
font-weight: bolder;
font-size: 12px;
}

Je ziet je kunt class en selectors combineren.

descendant selector

Met geneste (descendant) selectors bepaal je de opmaak van een element dat voorkomt op eender welk niveau in een ander element, deze moeten gescheiden worden door een spatie.

li ul {
list-style-type: square;
}

Met bovenstaande regel bepaal je dat elke ul die voorkomt in een li een vierkantje moet hebben.

child selectors

Dit duid op een element dat het kind (child) is van zijn ouder (parent), dus waar het op neer komt is dit: elk element in een HTML document is het child van de body bijvoorbeeld, maar ook kan het zijn dat een p die in een div voorkomt de child is van de div. Deze worden altijd door een > gescheiden.

body>p {
color: #900;
}

of

#blaat>p {
color: #900;
}

Deze selector wordt niet ondersteund door Internet Explorer 6

Daar deze selector enkel volledig werkt bij Opera, wordt deze ook wel de “Be nice to Opera” regel genoemd.

adjacent sibling selector

Deze moeilijke benaming staat een eenvoudige bepaling hoor, dus een element dat direct op een ander element volgt met dezelfde parent, deze worden gescheiden door een + .

H1+H2 {
margin-top: -5px
}

Met bovenstaand voorbeeld wordt bepaald dat als een h2 direct volgt op een h1, dan is de boven marge vermindert met 5px.

Deze selector wordt niet ondersteund door Internet Explorer 6

attribute selector

Een attribute selector laat toe elementen op te maken voor elementen die een bepaald attribuut hebben of een bepaalde waarde hebben. Attributen bevinden zich in vierkante haakjes [ ] .

h1[title] {
color: #00f;
}
a[href="http://www.website.be"] {
font-weight: bold;
}
img[alt~="de fiets"] {
background-color : #541;
}
span[lang|="fr"] {
background-color : #630;
}

Elk h1 element dat gebruik maakt van een title attribuut (ongeacht de waarde die title kan hebben) zal de kleur #00f hebben.
Elkea die als linkadres de waarde http://www.website.be heeft zal benadrukt worden weergegeven.
Elke img die als alt beschrijving de waarde een fiets heeft zal de achtergrondkleur #541 hebben.
Elke span die gebruik maakt van de lang attribuut zal de achtergrondkleur #630 hebben.

class selector

Een class is een toewijzing die verschillende kan worden gebruikt door het hele document.

.nota {
font-size: small
}
.groen {
background-color: green
}
.zwarterand {
border: solid 2px black
}

Maar een class kan ook worden toegewezen op een specifiek element:

p.nota {
font-size: small
}
div.groen {
background-color: green
}
div.zwarterand {
border: solid 2px black
}

id selector

Om via een stylesheet een opmaak aan slechts één bepaald element te binden maak je gebruik van een id selector gedeclareerd door het # teken gevolgd door een unieke naam. Het verschil met een Class is dus dat een ID slechts éénmaal gebruikt kan worden.

#blaat {
font-style: italic;
}

:first-child pseudoclass

De :first-child pseudoclass selecteert het eerste element dat een child is van een parent element, dus als zich bijvoorbeeld een p (child) als eerste bevind in een div (parent) dan is deze geselecteerd.

div>p:first-child {
color: 0#900;
}

Deze selector wordt niet ondersteund door Internet Explorer 6

:link :visited :hover :active en :focus pseudoclasses

:hover :active en :focus pseudoclasses kunnen worden toegepast op elk element, terwijl :link :visited enkel op anchor (links) gelden.

a:focus {
background-color : #566;
}

Bij Internet Explorer 6 zijn deze selectors enkel van toepassing op <a>

Belangrijk: de volgorde waarin deze geplaatst worden, anders hebben ze geen invloed.

a:link { color: red }
a:visited { color: blue }
a:hover { color: yellow }
a:active { color: lime }

Tip voor het onthouden van deze regel: LoVe HAte. Of: Liefde en Vriendschap Hangen Aan elkaar.

:lang pseudoclasses

Met de :lang pseudoclass kan je de natuurlijke taal van een document evalueren als dat gespecifieerd is in een HTML element.

html:lang(fr) {
quotes: '« ' ' »'
}

Dus als er ergens in je document een bepaalde tag het attribuut lang="fr" heeft, dan zal deze omringt worden door « »

:first-line pseudoelement

Met het :first-line pseudoelement selecteer je de eerste lijn van een alinea.

p:first-line {
font-style: italic
}

Dus met deze regel zal elke eerste regel van een alinea cursief weer worden gegeven.

:first-letter pseudoelement

Met het :first-letter pseudoelement selecteer je de eerste letter van een alinea. Wat je er zoal mee kan doen zie je in deze tutorial.

p {
font-size: 1em;
line-height: 12pt;
}
p:first-letter {
font-size: 200%;
font-style: italic;
font-weight: bold;
float: left
}

:before en :after pseudoelementen

De :before en :after pseudoelementen worden gebruikt om gegenerereerde inhoud in te voegen voor of achter een HTML element.

p.note:before {
content: "Opgelet: \A";
}
p.note {
border: 1px solid red
}

Dus hier zal een alinea met de class .note worden weergegeven met een rode rand van 1px dik, waarbij de inhoud zal worden voorafegaan door het woord opgelet en op een nieuw regel zal de tekst worden getoond.