CSS Attribute Selectors

Stijl instellen voor HTML-elementen met specifieke eigenschappen

We kunnen de stijl van HTML-elementen met specifieke eigenschappen of eigenschapswaarden instellen.

CSS [attribute] Selecteur

[attribute] Selectors worden gebruikt om elementen te selecteren die de opgegeven eigenschap hebben.

Het volgende voorbeeld selecteert alle <a>-elementen met de eigenschap target;

Instance

a[target] {
  background-color: yellow;
}

Try it yourself

CSS [attribute="value"] Selectors

[attribute="value"] Selectors worden gebruikt om elementen te selecteren die de opgegeven eigenschap en waarde hebben.

Het volgende voorbeeld selecteert alle <a>-elementen met de eigenschap target="_blank":

Instance

a[target="_blank"] { 
  background-color: yellow;
}

Try it yourself

CSS [attribute~="value"] Selectors

[attribute~="value"] Selectors worden gebruikt om elementen te selecteren die de opgegeven eigenschapswaarde bevatten.

Het volgende voorbeeld selecteert alle elementen met de title-eigenschap die het woord "flower" bevatten:

Instance

[title~="flower"] {
  border: 5px solid yellow;
}

Try it yourself

De bovenstaande voorbeelden zullen de volgende elementen matchen: title="flower", title="summer flower" en title="flower new", maar niet: title="my-flower" of title="flowers".

CSS [attribute|="value"] Selectors

[attribute|="value"] Selectors worden gebruikt om elementen te selecteren die de opgegeven eigenschap hebben met de opgegeven waarde als beginletter.

In the following example, all elements with a class attribute starting with "top" are selected:

Opmerking:De waarde moet een volledige of afzonderlijke woord zijn, bijvoorbeeld class="top" of gevolgd door een koppelteken, bijvoorbeeld class="top-text".

Instance

[class|="top"] {
  background: yellow;
}

Try it yourself

CSS [attribute^="value"] selector

[attribute^="value"] selector is used to select elements with an attribute starting with the specified value.

In the following example, all elements with a class attribute starting with "top" are selected:

Tip:The value does not have to be a complete word!

Instance

[class^="top"] {
  background: yellow;
}

Try it yourself

CSS [attribute$="value"] selector

[attribute$="value"] selector is used to select elements with an attribute ending with the specified value.

In the following example, all elements with a class attribute ending with "test" are selected:

Tip:The value does not have to be a complete word!

Instance

[class$="test"] {
  background: yellow;
}

Try it yourself

CSS [attribute*="value"] selector

[attribute*="value"] selector selects elements with an attribute value containing the specified word.

In the following example, all elements with a class attribute containing "te" are selected:

Tip:The value does not have to be a complete word!

Instance

[class*="te"] {
  background: yellow;
}

Try it yourself

Set form styles

If you need to set styles for forms without class or id, attribute selectors can be very useful:

Instance

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Try it yourself

Tip:Please visit our CSS Form Tutorial，Learn more about how to set form styles with CSS.

All CSS attribute selectors

Selector Example Example description
[eigenschap] [target] Select all elements with the target attribute.
[eigenschap=waarde] [target=_blank] Select all elements with the attribute target="_blank".
[eigenschap~=waarde] [title~=flower] Select all elements with a title attribute containing the word "flower".
[eigenschap|=waarde] [lang|=en] Select all elements with a lang attribute starting with "en".
[eigenschap^=waarde] a[href^="https"] Select each <a> element whose href attribute value starts with "https".
[eigenschap$=waarde] a[href$=".pdf"] Select each <a> element whose href attribute value ends with ".pdf".
[eigenschap*=waarde] a[href*="codew3c"] Selecteer elke <a> element die de href-eigenschap bevat met de substring "codew3c".

Uitgebreide Lezing

Extra Boeken:CSS Attribuut Selecteur Uitleg