CSS ominaisuusvalitsimet

Aseta tyylit HTML-elementeille, joilla on tietty ominaisuus

Voimme asettaa HTML-elementtien tyylit, joilla on tietty ominaisuus tai ominaisuuden arvo.

CSS [attribute] valitsin

[attribute] valitsin valitsee elementit, joilla on tietty ominaisuus.

Alla oleva esimerkki valitsee kaikki <a>-elementit, joilla on target-ominaisuus;

Esimerkki

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

Kokeile itse!

CSS [attribute="value"] valitsin

[attribute="value"] valitsin valitsee elementit, joilla on tietty ominaisuus ja arvo.

Alla oleva esimerkki valitsee kaikki <a>-elementit, joilla on target="_blank" -ominaisuus:

Esimerkki

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

Kokeile itse!

CSS [attribute~="value"] valitsin

[attribute~="value"] valitsin valitsee elementit, joiden ominaisuuden arvo sisältää tietyn sanan.

Alla oleva esimerkki valitsee kaikki elementit, joiden title-ominaisuus sisältää sanan "flower":

Esimerkki

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

Kokeile itse!

Yllä oleva esimerkki sopii seuraaville ominaisuuksille: title="flower"、title="summer flower" ja title="flower new"，mutta ei sovi seuraaville: title="my-flower" tai title="flowers"。

CSS [attribute|="value"] valitsin

[attribute|="value"] valitsin valitsee elementit, joiden määrittelyssä on tietty ominaisuus ja arvo.

Esimerkissä valitaan kaikki class-ominaisuuden sisältämät elementit, jotka alkavat "top":

Kommentti:Arvo täytyy olla täydellinen tai yksittäinen sana, esimerkiksi class="top" tai jonka jälkeen on viiva, esimerkiksi class="top-text"。

Esimerkki

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

Kokeile itse!

CSS [attribute^="value"]-valitsin

[attribute^="value"]-valitsin käytetään valitsemaan elementtejä, joiden ominaisuuden arvo alkaa määritettyyn arvoon.

Esimerkissä valitaan kaikki class-ominaisuuden sisältämät elementit, jotka alkavat "top":

Vinkki:Arvo ei tarvitse olla täydellinen sana!

Esimerkki

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

Kokeile itse!

CSS [attribute$="value"]-valitsin

[attribute$="value"]-valitsin käytetään valitsemaan elementtejä, joiden ominaisuuden arvo päätyy määritettyyn arvoon.

Esimerkissä valitaan kaikki class-ominaisuuden sisältämät elementit, jotka päätyvät "test":

Vinkki:Arvo ei tarvitse olla täydellinen sana!

Esimerkki

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

Kokeile itse!

CSS [attribute*="value"]-valitsin

[attribute*="value"]-valitsin valitsee elementit, joiden ominaisuuden arvo sisältää määritetyn sanan.

Esimerkissä valitaan kaikki class-ominaisuuden sisältämät elementit, jotka sisältävät sanan "te":

Vinkki:Arvo ei tarvitse olla täydellinen sana!

Esimerkki

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

Kokeile itse!

Aseta lomaketyylejä

Jos haluat asettaa tyylejä lomakkeelle ilman luokkaa tai id:tä, ominaisuusvalitsimet ovat hyödyllisiä:

Esimerkki

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

Kokeile itse!

Vinkki:Vierailkaamme CSS-lomakkeiden opetusohjelmaLisätietoja CSS-lomaketyyleistä.

Kaikki CSS-ominaisuusvalitsimet

Valitsin Esimerkki Esimerkki kuvaus
[attribute] [target] Valitse kaikki elementit, joilla on target-ominaisuus.
[attribute=value] [target=_blank] Valitse kaikki elementit, joilla on target="_blank"-ominaisuus.
[attribute~=value] [title~=flower] Valitse kaikki elementit, joilla on title-ominaisuus, joka sisältää sanan "flower".
[attribute|=value] [lang|=en] Valitse kaikki elementit, joilla on lang-ominaisuus, joka alkaa "en".
[attribute^=value] a[href^="https"] Valitse kaikki <a>-elementit, joiden href-ominaisuus alkaa "https".
[attribute$=value] a[href$=".pdf"] Valitse kaikki <a>-elementit, joiden href-ominaisuus päätyy ".pdf".
[attribute*=value] a[href*="codew3c"] Valitaan kaikki <a>-elementit, joiden href-ominaisuus sisältää alijonon "codew3c".

Lisäluettelo

Lisäkirjat:CSS-ominaisuusvalitsimen selitys