CSS ominaisuusvalitsimen yksityiskohtainen selitys

CSS 2 otti käyttöön ominaisuusvalitsimet.

Ominaisuusvalitsimet voivat valita elementtejä elementtien ominaisuuksien ja ominaisuusarvojen perusteella.

Yksinkertainen ominaisuusvalitsin

Jos haluat valita elementtejä, joilla on tietty ominaisuus riippumatta ominaisuuden arvosta, voit käyttää yksinkertaista ominaisuusvalitsinta.

Esimerkki 1

Jos haluat tehdä kaikki elementit, joilla on otsikko (title), punaisiksi, voit kirjoittaa:

*[title] {color:red;}

Kokeile itse!

Esimerkki 2

Samoin kuin edellä, voit soveltaa tyylejä vain href-ominaisuuden omaaviin ankkureihin (a-elementteihin):

a[href] {color:red;}

Kokeile itse!

Esimerkki 3

Voit valita useiden ominaisuuksien perusteella, vain yhdistämällä ominaisuusvalitsimet yhteen.

Esimerkiksi, voidaan tehdä punaiseksi HTML-hyperlinkin teksti, jolla on sekä href että title-ominaisuudet, kirjoittamalla se näin:

a[href][title] {color:red;}

Kokeile itse!

Esimerkki 4

Tätä ominaisuutta voidaan käyttää luovasti.

Esimerkiksi, voidaan soveltaa tyyliä kaikille alt-ominaisuuden omaaville kuville, jotta näytetään tehokkaasti nämä toimivat kuvat:

img[alt] {border: 5px solid red;}

Kokeile itse!

Vinkki:Yllä oleva erityistapaus sopii paremmin diagnostisiin tarkoituksiin eikä suunnitteluun, eli se käytetään varmistaakseen, että kuvat ovat todella toimivia.

Esimerkki 5: Käytä attribuuttivalitsinta XML-dokumentissa

Attribuuttivalitsimet ovat erittäin hyödyllisiä XML-dokumenttien yhteydessä, koska XML-kieli korostaa elementtien ja attribuuttien käyttötarkoituksen määrittämistä.

Oletetaan, että olemme suunnitelleet XML-dokumentin, joka kuvaa aurinkokunnan planeettoja. Jos haluamme tehdä kaikkien moons-ominaisuuden omaavien planet-elementtien tekstin punaiseksi, jotta voimme keskittyä paremmin planeettoihin, joilla on kuukaita, voimme kirjoittaa sen näin:

planet[moons] {color:red;}

Tämä tekee, että seuraavassa merkinnässä toisen ja kolmannen elementin teksti näkyy punaisena, mutta ensimmäisen elementin teksti ei ole punainen:

<planet>Venus</planet>
<planet kuukaudet="1">Earth</planet>
<planet moons="2">Mars</planet>

Tarkista vaikutus

Valitaan erityisten ominaisuuksien arvojen perusteella

Vastaanottamalla tiettyjä ominaisuuksia omaavista elementeistä voidaan edelleen supistaa valinta-aluetta ja valita vain elementit, joilla on tiettyjä ominaisuusarvoja.

Esimerkki 1

Esimerkiksi, oletetaan, että haluat tehdä punaiseksi hyperlinkin, joka osoittaa tiettyyn dokumenttiin Web-palvelimella, voit kirjoittaa sen näin:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Kokeile itse!

Esimerkki 2

Kuten yksinkertaisissa attribuuttivalitsimissa, voidaan yhdistää useita attribuuttiarvovalitsimia valitakseen dokumentista.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Tämä muuttaa ensimmäisen hyperlinkin tekstin punaiseksi seuraavassa merkinnässä, mutta toinen tai kolmas linkki ei vaikuta siihen:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Kokeile itse!

Esimerkki 3

Samoin, XML-kieli voi käyttää tätä metodia tyyleihin.

Palaamme nyt takaisin planeettojen esimerkkiin. Oletetaan, että haluat valita vain ne planet-elementit, joissa kuukaudet-ominaisuuden arvo on 1:

planet[kuukaudet="1"] { väri: punainen;}

Yllä oleva koodi tekee seuraavista merkinnöistä toisen elementin punaiseksi, mutta ensimmäinen ja kolmas elementti eivät ole vaikuttuneita:

<planet>Venus</planet>
<planet kuukaudet="1">Earth</planet>
<planet kuukaudet="2">Mars</planet>

Tarkista vaikutus

Ominaisuus ja ominaisuusarvo täytyy matchata täydellisesti

Huomaa, että tämä muoto vaatii täydellisen matchin ominaisuusarvon kanssa.

Jos ominaisuusarvo sisältää arvot, jotka ovat eroteltu välilyönnillä, match voi aiheuttaa ongelmia.

Harkitse seuraavaa merkintäpalaa:

<p class="important warning">Tämä kappale on erittäin tärkeä varoitus.</p>

Jos kirjoitat p[class="important"], tämä sääntö ei voi matchata esimerkkitunnistetta.

Jos haluat valita tietyn ominaisuusarvon, sinun täytyy kirjoittaa se tällä tavalla:

p[class="important warning"] { väri: punainen;}

Kokeile itse!

Osittaisarvo-ominaisuusvalitsimen käyttö

Jos haluat valita sanan listasta, joka on määritelty ominaisuusarvossa, sinun täytyy käyttää aaltosilmukkaa (~).

Olettaen, että haluat valita elementit, joissa class-ominaisuus sisältää sanan important, voit tehdä tämän valitsijalla:

p[class~="important"] { väri: punainen;}

Kokeile itse!

Jos pyydetään aaltosilmukan jättämistä pois, se tarkoittaa, että täytyy tehdä täydellinen arvon match.

Osittaisarvo-ominaisuusvalitsimen ja piste-luokan merkinnän välinen ero

Tämä valitsin on yhtä arvokas kuin luokka-valitsimissa käsittelemämme piste-luokan merkintä.

Tämä valitsin on yhtä arvokas kuin p.important ja p[class="important"] HTML-dokumenttiin sovellettaessa.

Miksi siis tarvitaan "~=" ominaisuusvalitsinta? Koska se voidaan käyttää mihin tahansa ominaisuuteen, ei vain luokkaan.

Esimerkiksi, dokumentissa voi olla suuri määrä kuvia, joista vain osa on kuvia. Tässä tapauksessa voidaan käyttää title-dokumentin osittaisia ominaisuusvalitsimia valitakseen vain nämä kuvat:

img[title~="Kuva"] { reunus: 1 px solid harmaa;}

Tämä sääntö valitsee kaikki kuvat, joiden title-teksti sisältää "Figure". Kuvat, joilla ei ole title-ominaisuutta tai joissa title-ominaisuus ei sisällä "Figure"-sanaa, eivät matchaa.

Kokeile itse!

Alijonon match-ominaisuusvalitsimet

Esittelemme nyt edistyneemmän valitsinmoduulin, joka julkaistiin CSS2:n jälkeen ja joka sisältää lisää osa-arvovalitsimia. Mukaan standardin nimityksellä niitä tulisi kutsua "alijonon match-ominaisuusvalitsimiksi".

Monet nykyaikaiset selaimet tukevat näitä valitsimia, mukaan lukien IE7.

Seuraavassa taulukossa on yksinkertainen yhteenveto näistä valitsimista:

Tyyppi kuvaus
[abc^="def"] Valita kaikki elementit, joiden abc-ominaisuusarvo alkaa "def".
[abc$="def"] Valita kaikki elementit, joiden abc-ominaisuusarvo päättyy "def".
[abc*="def"] Valita kaikki elementit, joiden abc-ominaisuusarvo sisältää alijonon "def".

Näille valitsimille tulee mieleen monia käyttötarkoituksia.

Esimerkiksi, jos haluat soveltaa tyyliä kaikkiin CodeW3C.com-osoitteisiin viittaaviin linkkeihin, sinun ei tarvitse määritellä kaikkia näitä linkkejä luokille ja kirjoittaa siihen tyyliä, vaan voit kirjoittaa vain seuraavan säännön:

a[href*="codew3c.com"] {color: red;}

Kokeile itse!

Vinkki:Mikä tahansa ominaisuus voidaan käyttää näillä valitsimilla.

Erityinen ominaisuusvalitsin

Esittelemme nyt erityisen ominaisuusvalitsimen. Katso seuraava esimerkki:

*[lang|="en"] {color: red;}

Tämä sääntö valitsee kaikki lang-ominaisuusarvon en tai en-alkuiset elementit. Siksi seuraavassa esimerkissä ensimmäiset kolme elementtiä valitaan, eikä viimeisiä kahta valita:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Kokeile itse!

Yleisesti ottaen [att|="val"] voidaan käyttää mihin tahansa ominaisuuteen ja sen arvoon.

Oletetaan, että HTML-dokumentissa on sarja kuvia, joissa jokaisen kuvan tiedostonimi on muodossa figure-1.jpg ja figure-2.jpgVoit käyttää seuraavaa valitsinta matchata kaikki nämä kuvat:

img[src|="figure"] {border: 1px solid gray;}

Kokeile itse!

Totta kai, tämän ominaisuusvalitsimen yleisimmin käytetty tarkoitus on hakemaan kieliarvoja.

CSS valitsinviittausopas

valitsin kuvaus
[ominaisuus] Käytetään valitsemaan elementtejä, joilla on määritetty ominaisuus.
[ominaisuus=arvo] Käytetään valitsemaan elementtejä, joilla on määritetty ominaisuus ja arvo.
[ominaisuus~=arvo] Käytetään valitsemaan elementtejä, joiden ominaisuusarvo sisältää määritetyn sanan.
[ominaisuus|=arvo] Käytetään valitsemaan elementtejä, joilla on määritetty ominaisuusarvo, joka alkaa määritetystä arvosta ja on kokonais sana.
[ominaisuus^=arvo] Vastaavat kaikki elementit, joiden ominaisuusarvo alkaa määritettyyn arvoon.
[ominaisuus$=arvo] Vastaavat kaikki elementit, joiden ominaisuusarvo päätyy määritettyyn arvoon.
[ominaisuus*=arvo] Vastaavat kaikki elementit, joiden ominaisuusarvo sisältää määritetyn arvon.