Volgens het W3

CSS 2.1 allows authors to specify rules that match elements which have certain attributes defined in the source document.


Met andere woorden: Aan de hand van het gebruikte element attribute zal een bepaalde CSS worden toegepast op een element.

En wat kunnen we ermee

Veel, heel veel, maar ik zal het even handig en eenvoudig houden.
Zoals je waarschijnlijk reeds op vele websites gezien hebt, gebruiken webmasters een icoontje om duidelijk te maken dat een URI naar een externe website gaat : Een afbeelding voor externe links te identificieren of Een afbeelding voor externe links te identificieren.

class, id of attribute selectors

Je hebt natuurlijk de keuze welke manier je kunt/gaat gebruiken, maar laat ik je even zeggen dat als je class, id of attribute selectors gaat gebruiken, je ook je HTML moet gaan aanpassen..

Voor class

a.extern {
padding-right: 18px;
background: transparent url(external.gif) no-repeat center right;
}
Heeft ook nodig:
<a href="#" class=”extern” title=”#”>foo</a>

Idem voor id

a#extern {
padding-right: 18px;
background: transparent url(external.gif) no-repeat center right;
}
Heeft ook nodig:
<a href="#" id=”extern” title=”#”>foo</a>

Dit is een slecht voorbeeld, je kan id maar één keer per document gebruiken, dus maar één link stylen. Echt afgeraden het via id te doen.

Terwijl dan met attribute selectors

a[rel*="follow"] {
padding-right: 20px;
background: transparent url(external.gif) no-repeat center right;
}
Heeft ook nodig:
<a href="#" rel=”nofollow” title=”#”>foo</a>

De CSS regel: rel*="follow", dit wil zeggen:
Style elke link <a> waarvan de attribute rel is, en in de value ergens follow in voorkomt - in nofollow zit ook follow - met een icoontje.

Het kan ook voor bestands extensies

Voor PDF bestanden:

a[href$=".pdf"] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}

Voor TXT bestanden:

a[href$=".txt"] {
padding-right: 18px;
background: transparent url(icon_txt.gif) no-repeat center right;
}

Voor EXE bestanden:

a[href$=".exe"] {
padding-right: 18px;
background: transparent url(icon_exe.gif) no-repeat center right;
}

Om er maar een paar te tonen, je kan er vele kanten mee uit, maar rekening houdend met volgende regels:

  1. [foo]
    Heeft een attribute genaamd “foo”
  2. [foo="bar"]
    Heeft een attribute genaamd “foo” met een value “bar”
  3. [foo~="bar"]
    Value heeft het woord “bar” in zich ergens (”sex bar drank”)
  4. [foo^="bar"]
    Value gegint met “bar” (”barkruk”)
  5. [foo$="bar"]
    Value eindigt met “bar” (”Drank staat achter de bar”)
  6. [foo*="bar"]
    Value heeft “bar” ergens (”Een sexbar is wat ik zoek”)

Nog iets

Zoals je wel of niet weet, maar IE7 ondersteunt deze manier van CSS schrijven wel, maar je HTML document moet voorzien zijn van een DOCTYPE ( klik hier voor een opfrissing omtrent DOCTYPE ), om uit de quirksmode gehaald te worden.

Natuurlijk kan je op W3C terecht voor meer engelstalige info.