CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS Attribuut selectors

Het is mogelijk om HTML-elementen op te maken die specifieke attributen of attribuutwaarden hebben bijv. door gebruik te maken van attribuut-selectors, hiermee heb je de mogelijkheid om een stijl aan een element te koppelen afhankelijk van de aanwezigheid van een bepaald attribuut, of de waarde ervan.

VoorbeeldVoorbeeld: 
abbr[title] {
 color: red;
 font-weight: bold;
}

We kunnen bijvoorbeeld alle elementen met het title-attribuut opmaken door de volgende stijlregel te gebruiken.

VoorbeeldVoorbeeld: 
[title] {
 color: green;
}

CSS [attribuut="waarde"] selector

De attribuut selector (=) wordt gebruikt om elementen te selecteren met een gespecificeerd attribuut en waarde. De selector in het onderstaande voorbeeld komt overeen met alle <input> elementen die een type-attribuut hebben met een waarde die gelijk is aan submit.

VoorbeeldVoorbeeld: 
input[type="submit"] {
 border: 3px solid green;
}

CSS [attribuut~="waarde"] selector

Wanneer de waarde van het attribuut bestaat uit een reeks door spaties gescheiden woorden, dan kun je de selector (~=) gebruiken. Deze wordt gebruikt om elementen te selecteren met een attribuutwaarde die een gespecificeerd woord bevatten. In het volgende voorbeeld worden de elementen geselecteerd, waarvan één van de woorden in de waarde van het attribuut overeenkomt met de waarde in de selector, in dit geval is het geselecteerde woord "achtergrond".

VoorbeeldVoorbeeld: 
[class~="achtergrond"] {
 color: #fff;
 background: green;
}

CSS [attribuut|="waarde"] selector

Wanneer de waarde van het attribuut bestaat uit een reeks door een liggend streepje gescheiden woorden, dan kun je de selector (|=) gebruiken. Deze selecteert elementen, met het gespecificeerde attribuut beginnend met de gespecificeerde waarde.

VoorbeeldVoorbeeld: 
[class|="top"] {
 background: red;
 color: white;
}

CSS [attribuut^="waarde"] selector

Deze selector wordt gebruikt om elementen te selecteren waarvan de attribuut waarde begint met een gespecificeerde waarde. In het volgende voorbeeld worden alle elementen geselecteerd met een class attribuut waarde die begint met "top".

VoorbeeldVoorbeeld: 
[class^="top"] {
 background: green;
 color: white;
}

Tip De waarde hoeft geen heel woord te zijn!

CSS [attribuut$="waarde"] selector

Deze selector wordt gebruikt om elementen te selecteren waarvan de attribuut waarde eindigt met een gespecificeerde waarde. In het volgende voorbeeld worden alle elementen geselecteerd met een class attribuut waarde die eindigt op "top".

VoorbeeldVoorbeeld: 
[class$="top"] {
 background: purple;
 color: white;
}

Tip De waarde hoeft geen heel woord te zijn!

CSS [attribuut*="waarde"] selector

Deze selector wordt gebruikt om elementen te selecteren waarvan de attribuut waarde een gespecificeerde waarde bevat. In het volgende voorbeeld worden alle elementen geselecteerd met een class attribuut waarde die "ter" bevatten.

VoorbeeldVoorbeeld: 
[class*="ter"] {
 background: blue;
 color: white;
}

Tip De waarde hoeft geen heel woord te zijn!

Formulieren en selectors

Je kunt attribuut selectors ook gebruiken voor het opmaken van formulieren, deze kunnen handig zijn omdat je de formulieren kunt opmaken zonder class of id te gebruiken.

VoorbeeldVoorbeeld: 
input[type="text"], input[type="password"] {
 width: 150px;
 display: block;
 margin-bottom: 10px;
 background: silver;
}
input[type="submit"] {
 color: #fff;
 padding: 2px 10px;
 border: 1px solid #804040;
 background: #666;
}

Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.