KOMPOOS.NL
css selectors
sitemap
voorbeelden van hoe een css selector te gebruiken
de css regel is:
img[src $=".jpg"]{border:5px #aa0000 solid}
uitleg $= selector
Elke image waarvan het (url)adres eindigt op .jpg krijgt een rode border.
html regel is:
<img src="http://static.dns5.nl/css-selector.jpg" width="80" height="108" alt="css-selector" />
de css regel is:
img[alt ="test-selector"]{border:5px #00aa00 solid}
uitleg = selector
Elke image waarvan de alt is test-selector krijgt een groene border.
html regel is:
<img src="http://static.dns5.nl/css-selector.jpg" width="80" height="108" alt="test-selector" />
de css regel is:
img[title ~="willekeurig"]{border:5px #aa00aa solid}
uitleg ~= selector
Elke image waarvan de title het woord willekeurig bevat krijgt een paarse border.
html regel is:
<img src="http://static.dns5.nl/css-selector.jpg" width="80" height="108" title="een willekeurig woord" alt="title selector" />
de css regel is:
img[alt ^="begin"]{border:5px #0000ff solid}
uitleg ^= selector
Elke image waarvan de alt begint met de letters begin krijgt een blauwe border.
html regel is:
<img src="http://static.dns5.nl/css-selector.jpg" width="80" height="108" alt="beginnen met alt van selector" />
de css regel is:
img[alt *="reeds"]{border:5px #ffbb00 solid}
uitleg * = selector
Elke image waarvan de alt de letters reeds (in gereedschap) bevat krijgt een gele border.
html regel is:
<img src="http://static.dns5.nl/css-selector.jpg" width="80" height="108" alt="css selectors zijn zeer goed gereedschap" />
nog iets meer informatie over de selectors
In dit voorbeeld zijn er images (img) gebruikt om de werking van de css-selectors te demonstreren. Maar je kan het op álle elementen op jouw pagina toepassen. In plaats van img[src $=".jpg"] kan je net zo makkelijk a[href $=".jpg"] schrijven. In het laatste geval wordt elke link met .jpg als extensie "benaderd" door de stylesheet.
de complete stylesheet zoals gebruikt op deze pagina
<style type="text/css">
img[src $=".jpg"]{border:5px #aa0000 solid}
img[alt ="test-selector"]{border:5px #00aa00 solid}
img[title ~="willekeurig"]{border:5px #aa00aa solid}
img[alt ^="begin"]{border:5px #0000ff solid}
img[alt *="reeds"]{border:5px #ffbb00 solid}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.