CSS - kenmerkkiezers
Stijl HTML-elementen met specifieke attributen
Het is mogelijk om HTML-elementen op te maken die specifieke attributen of attribuutwaarden hebben.
CSS [attribuut]-kiezer
De [attribute]selector wordt gebruikt om elementen met een gespecificeerd attribuut te selecteren.
In het volgende voorbeeld worden alle <a>-elementen met een target-attribuut geselecteerd:
Voorbeeld
a[target] {
background-color: yellow;
}
CSS [attribuut="waarde"]-kiezer
De [attribute="value"]selector wordt gebruikt om elementen met een gespecificeerd attribuut en waarde te selecteren.
In het volgende voorbeeld worden alle <a>-elementen met het kenmerk target="_blank" geselecteerd:
Voorbeeld
a[target="_blank"] {
background-color: yellow;
}
CSS [attribuut~="waarde"]-kiezer
De [attribute~="value"]selector wordt gebruikt om elementen te selecteren met een attribuutwaarde die een gespecificeerd woord bevat.
In het volgende voorbeeld worden alle elementen geselecteerd met een title-attribuut dat een door spaties gescheiden lijst met woorden bevat, waarvan er één "bloem" is:
Voorbeeld
[title~="flower"] {
border: 5px solid yellow;
}
In het bovenstaande voorbeeld komen elementen overeen met title="flower", title="summer flower" en title="flower new", maar niet met title="my-flower" of title="flowers".
CSS [attribuut|="waarde"] Selector
De [attribute|="value"]selector wordt gebruikt om elementen te selecteren met het gespecificeerde attribuut, waarvan de waarde exact de gespecificeerde waarde kan zijn, of de gespecificeerde waarde gevolgd door een koppelteken (-).
Opmerking: de waarde moet een heel woord zijn, ofwel alleen, zoals class="top", of gevolgd door een koppelteken ( - ), zoals class="top-text".
Voorbeeld
[class|="top"] {
background: yellow;
}
CSS [attribuut^="waarde"]-kiezer
De [attribute^="value"]selector wordt gebruikt om elementen met het opgegeven attribuut te selecteren, waarvan de waarde begint met de opgegeven waarde.
In het volgende voorbeeld worden alle elementen geselecteerd met een class-attribuutwaarde die begint met "top":
Let op: De waarde hoeft geen heel woord te zijn!
Voorbeeld
[class^="top"] {
background: yellow;
}
CSS [attribuut$="waarde"]-kiezer
De [attribute$="value"]selector wordt gebruikt om elementen te selecteren waarvan de attribuutwaarde eindigt met een gespecificeerde waarde.
In het volgende voorbeeld worden alle elementen geselecteerd met een class-attribuutwaarde die eindigt op "test":
Let op: De waarde hoeft geen heel woord te zijn!
Voorbeeld
[class$="test"] {
background: yellow;
}
CSS [attribuut*="waarde"]-kiezer
De [attribute*="value"]selector wordt gebruikt om elementen te selecteren waarvan de attribuutwaarde een gespecificeerde waarde bevat.
In het volgende voorbeeld worden alle elementen geselecteerd met een class-attribuutwaarde die "te" bevat:
Let op: De waarde hoeft geen heel woord te zijn!
Voorbeeld
[class*="te"] {
background: yellow;
}
Vormen stylen
De attribuutselectors kunnen handig zijn voor het opmaken van formulieren zonder klasse of ID:
Voorbeeld
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Tip: Bezoek onze CSS Forms Tutorial voor meer voorbeelden over het opmaken van formulieren met CSS.
Alle CSS-kenmerkkiezers
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |