Over * en [] in Style Sheets
Soms zie je in een selector CSS-code een asterisk (sterretje) staan. Ook zie je wel dat een selector een tekst heeft tussen vierkante haken. Op deze bladzijde wordt uitgelegd wat het is en hoe het werkt.
Over de * in Style Sheets
De asterisk wordt universele selector genoemd. Een asterisk staat voor alles wat mogelijk is. Het is dus een wildcard,
net zoals je die in Windows (en daarvoor MS-DOS) kunt gebruiken.
Voorbeeld:
De code .abcd * { color:red } zorgt ervoor dat de tekstkleur van alle elementen die binnen de klasse abcd staan,
rood is.
Voorbeeld:
De code * .abcd { color:blue } zorgt ervoor dat de tekstkleur van alle elementen van de klasse abcd, blauw
is. Het is dus hetzelfde als .abcd { color:blue }.
Met het sterretje kun een CSS-reset maken. Zo zet je met de code: * { margin: 0; padding: 0; } de margin en de
padding van alle elementen in het document nul.
Overigens raad ik niet aan om * te gebruiken om een CSS-reset te doen. Daarvoor kun je beter alle elementen apart benoemen, zie het item CSS-reset: wat het is en wanneer je het moet gebruiken. Dan heb je contrôle over elk HTML-element apart.
Over de [ ] in Style Sheets
De vierkante haken (ook wel spekhaken genoemd) worden gebruikt om te kijken of er attributen bij het geselecteerde
element aanwezig zijn, of juist niet.
Voorbeeld:
De code a[href="pqrst.php"] { font-weight:bold; text-decoration:none } zorgt ervoor dat de opmaak van de
link naar pqrst.php vet op het scherm wordt gezet, zonder de gebruikelijke onderstreping.
Voorbeeld:
De code a[href="*.php"] { font-weight:bold; text-decoration: overline } zorgt ervoor dat de opmaak van
alle links naar een .php-bestand vet op het scherm wordt getoond, met een lijn boven de linktekst.
Voorbeeld:
De code p[id] { background:yellow } zorgt ervoor dat alle <p>-tags die een id-attribuut hebben,
op een gele achtergrond worden getoond.
De code tussen de spekhaken kan op meerdere manieren worden gebruikt:
| code | Betekenis | |
| [attribuut] | Selecteert een element dat 'attribuut' bevat. Het maakt niet uit welke waarde attribuut
heeft. |
|
| [attribuut=waarde] | Selecteert een element dat 'attribuut' bevat. De waarde van attribuut is exact
gelijk aan 'waarde'. |
|
| [attribuut~=waarde] | Selecteert een element dat 'attribuut' bevat. De 'waarde' is een reeks woorden, gescheiden
door witruimte (een of meerdere spaties). Eén van die woorden moet exact gelijk zijn aan 'waarde'. Waarde
zelf mag echter geen witruimte bevatten, anders werkt de selector niet. Ook als waarde leeg is, doet de selector niets. |
|
| [attribuut|=waarde] | Selecteert een element dat 'attribuut' bevat. De waarde van attribuut is exact
gelijk aan 'waarde', of attribuut is exact gelijk aan waarde gevolgd door een min-teken. Dit is alleen bedoeld om te kunnen werken met lang-attributen, bijv. <html lang="NL-nl>". |
|
| [attribuutˆ=waarde] | Selecteert een element dat 'attribuut' bevat. De waarde van attribuut begint
met 'waarde'. |
|
| [attribuut$=waarde] | Selecteert een element dat 'attribuut' bevat. De waarde van attribuut eindigt
met 'waarde'. |
|
| [attribuut*=waarde] | Selecteert een element dat 'attribuut' bevat. De waarde van attribuut bevat
'waarde'. |
Dit overzicht is niet uitputtend, het geeft slechts een overzicht van de meest gebruikte mogelijkheden. Meer informatie vind je op de site van het WorldWide Web Consortium.
Gerelateerd artikel: Over >, + en ~ in Style Sheets.
