CSS - kenmerkkiesers
Styl HTML-elemente met spesifieke eienskappe
Dit is moontlik om HTML-elemente te styl wat spesifieke eienskappe of kenmerkwaardes het.
CSS [kenmerk] Kieser
Die [attribute]kieser word gebruik om elemente met 'n gespesifiseerde eienskap te kies.
Die volgende voorbeeld kies alle <a>-elemente met 'n teikenkenmerk:
Voorbeeld
a[target] {
background-color: yellow;
}
CSS [kenmerk="waarde"] Kieser
Die [attribute="value"]kieser word gebruik om elemente met 'n gespesifiseerde eienskap en waarde te kies.
Die volgende voorbeeld kies alle <a>-elemente met 'n target="_blank"-kenmerk:
Voorbeeld
a[target="_blank"] {
background-color: yellow;
}
CSS [kenmerk~="waarde"] Kieser
Die [attribute~="value"]kieser word gebruik om elemente te selekteer met 'n kenmerkwaarde wat 'n gespesifiseerde woord bevat.
Die volgende voorbeeld kies alle elemente met 'n titelkenmerk wat 'n spasie-geskeide lys woorde bevat, waarvan een "blom" is:
Voorbeeld
[title~="flower"] {
border: 5px solid yellow;
}
Die voorbeeld hierbo sal elemente ooreenstem met title="blom", title="somerblom", en title="blom nuut", maar nie title="my-blom" of title="blomme nie".
CSS [kenmerk|="waarde"] Kieser
Die [attribute|="value"]kieser word gebruik om elemente te kies met die gespesifiseerde kenmerk, waarvan die waarde presies die gespesifiseerde waarde kan wees, of die gespesifiseerde waarde gevolg deur 'n koppelteken (-).
Let wel: Die waarde moet 'n hele woord wees, óf alleen, soos class="top", of gevolg deur 'n koppelteken( - ), soos class="top-text".
Voorbeeld
[class|="top"] {
background: yellow;
}
CSS [kenmerk^="waarde"] Kieser
Die [attribute^="value"]kieser word gebruik om elemente met die gespesifiseerde kenmerk te kies, waarvan die waarde met die gespesifiseerde waarde begin.
Die volgende voorbeeld kies alle elemente met 'n klaskenmerkwaarde wat met "top" begin:
Let wel: Die waarde hoef nie 'n hele woord te wees nie!
Voorbeeld
[class^="top"] {
background: yellow;
}
CSS [kenmerk$="waarde"] Kieser
Die [attribute$="value"]kieser word gebruik om elemente te selekteer waarvan die eienskapwaarde met 'n gespesifiseerde waarde eindig.
Die volgende voorbeeld kies alle elemente met 'n klaskenmerkwaarde wat eindig met "toets":
Let wel: Die waarde hoef nie 'n hele woord te wees nie!
Voorbeeld
[class$="test"] {
background: yellow;
}
CSS [kenmerk*="waarde"] Kieser
Die [attribute*="value"]kieser word gebruik om elemente te kies waarvan die kenmerkwaarde 'n gespesifiseerde waarde bevat.
Die volgende voorbeeld kies alle elemente met 'n klaskenmerkwaarde wat "te" bevat:
Let wel: Die waarde hoef nie 'n hele woord te wees nie!
Voorbeeld
[class*="te"] {
background: yellow;
}
Stileer vorms
Die kenmerkkiesers kan nuttig wees vir stilering van vorms sonder klas 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;
}
Wenk: Besoek ons CSS Forms Tutoriaal vir meer voorbeelde oor hoe om vorms met CSS te styl.
Alle CSS-kenmerkkiesers
| 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" |