CSS: ssä on monia tapoja valita elementtejä. Perusvalinta on tunnisteen nimen, kuten p ( ). Lähes mikä tahansa tarkempi kuin taginvalitsin käyttää attribuutteja - classja IDmolemmat valitsevat näistä HTML-elementtien attribuuteista. Mutta classeivätkä IDole ainoat attribuutit, jotka kehittäjät voivat valita. Voimme käyttää mitä tahansa elementin attribuutteja valitsimina.
Attribuuttien valinnalla on erityinen syntakse. Tässä on esimerkki:
a(href="https://css-tricks.com") ( color: #E18728; )Se on tarkan haun valitsin, joka valitsee vain linkit, joiden hrefmääritteen arvo on ”https://css-tricks.com”.
Seitsemän erilaista
Määritteen valitsimet erottavat oletusarvoisesti isot ja pienet kirjaimet (katso isot ja pienet kirjainkohdat alla), ja ne kirjoitetaan sulkeisiin ().
Attribuuttivalitsimella on seitsemän erityyppistä vastaavuutta, ja syntaksit ovat erilaiset kullekin. Kukin monimutkaisemmista attribuuttivalitsimista perustuu tarkan haun valitsimen syntaksiin - ne kaikki alkavat attribuutin nimellä ja päättyvät yhtäläisyysmerkillä, jota seuraa attribuutin arvo (t), yleensä lainausmerkeissä. Määritteen nimen ja yhtäläisyysmerkin välinen ero on se, mikä tekee eron valitsimien välillä.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Arvo sisältää: määritteen arvo sisältää termin ainoana arvona, arvon arvoluettelossa tai osana muuta arvoa. Käytä tätä valitsinta lisäämällä tähti (*) ennen yhtäläisyysmerkkiä. Esimerkiksi, img(alt*="art")hän valitsee kuvat, joissa on vaihtoehtoinen teksti "abstrakti taide" ja "urheilija aloittamassa uutta urheilulajia", koska arvo "taide" on sanassa "lähtö".
Arvo on välilyönnillä erotetussa luettelossa: arvo on joko ainoa määritteen arvo tai se on koko arvo välilyönnillä erotetussa arvojoukossa. Toisin kuin ”sisältää” -valitsin, tämä valitsin ei etsi arvoa sanapalana. Käytä tätä valitsinta lisäämällä tilde (~) ennen yhtäläisyysmerkkiä. Esimerkiksi, img(alt~="art")hän valitsee kuvat, joissa on vaihtoehtoinen teksti "abstrakti taide" ja "taidenäyttely", mutta ei "urheilija, joka aloittaa uuden urheilulajin" (jonka "sisältää" -valitsin valitsisi).
Arvo alkaa: attribuutin arvo alkaa valitulla termillä. Jos haluat käyttää tätä valitsinta, lisää viiva (^) ennen yhtäläisyysmerkkiä. Älä unohda, pienillä ja pienillä kirjaimilla on merkitystä. Esimerkiksi img (alt = ”art”) valitsee kuvat, joissa on alt-teksti ”art show” ja “taiteellinen kuvio”, mutta ei kuvaa, jossa on alt-teksti “Arthur Miller”, koska ”Arthur” alkaa isolla kirjaimella .
Arvo on ensimmäinen väliviivalla erotetussa luettelossa: Tämä valitsin on hyvin samanlainen kuin ”alkaa” -valitsin. Tässä valitsin vastaa arvoa, joka on joko ainoa arvo tai on ensimmäinen viivalla erotetussa arvoluettelossa. Käytä tätä valitsinta lisäämällä putkimerkki (|) ennen yhtäsuuruusmerkkiä. Esimerkiksi, li(data-years|="1900")se valitsee luettelokohteet, joiden data-yearsarvo on “1900-2000”, mutta ei luettelokohteita, joiden data-yearsarvo on “1800-1900”.
Arvo päättyy: määritteen arvo päättyy valitulla termillä. Käytä tätä valitsinta lisäämällä dollarin merkki ($) ennen yhtäsuuruusmerkkiä. Esimerkiksi a(href$="pdf")valitsee kaikki linkit, jotka päättyvät .pdf-tiedostoon.
Huomautus lainauksista: Joissakin olosuhteissa voit kiertää arvon ympärillä ilman lainausmerkkejä, mutta lainausmerkkien valitsemisen säännöt ovat ristiriitaisia selainten välillä. Lainaukset toimivat aina, joten jos noudatat niiden käyttöä, voit olla varma, että valitsimesi toimii.
Katso CSS-Tricksin kynämääritteen valitsimet (@ css-tricks) CodePenistä.
Hauska tosiasia: arvoja käsitellään merkkijonoina, joten sinun ei tarvitse tehdä hienoja merkkejä, jotta ne sopisivat yhteen, kuten tekisit, jos käyttäisit epätavallisia merkkejä luokan tai tunnuksen valitsimessa.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Kirjainkoko ei eroa
Kirjainkoon erottamaton määritteen valitsin on osa CSS-työryhmän valitsinten tason 4 määrittelyä. Kuten edellä mainittiin, määritearvon merkkijonot ovat oletuksena kirjainkoon mukaisia, mutta ne voidaan muuttaa kirjainkoon merkitsemättömiksi lisäämällä ijuuri ennen sulkuhakemista:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Kirjainkoon erottamaton haku voi olla todella kätevää kohdistaa määritteisiin, joilla on arvaamaton, ihmisen kirjoittama teksti. Oletetaan esimerkiksi, että muotoilet keskustelusovelluksessa puhekuplaa ja haluat lisätä "heiluttavan käden" kaikkiin viesteihin, joissa on teksti "hei" jossain muodossa. Voit tehdä sen vain CSS: llä ja käyttää isoja ja pieniä kirjaimia erottamaan kaikki mahdolliset muunnelmat:
Katso CSS-Tricksin (@ css-tricks) kynän kirjainkokoinen CSS-attribuuttien vastaavuus CodePenissä.
Yhdistämällä ne
Voit yhdistää määritteen valitsimen muihin valitsimiin, kuten tunnisteeseen, luokkaan tai tunnukseen.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Tai jopa yhdistää useita määritteen valitsimia. Tässä esimerkissä valitsee kuvien alt tekstiä, joka sisältää sanan ”henkilö” ainoa arvo, tai arvo tilassa erotettu luettelo, jasrc arvo, joka sisältää arvon ”lorem”:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Katso CSS-Tricksin kynäyhdistettyjen attribuuttien ja vain attribuuttien valinta (@ css-tricks) CodePenistä.
Attribuuttivalitsimet JavaScriptissä ja jQueryssä
Attribuuttivalitsimia voidaan käyttää jQueryssä aivan kuten mitä tahansa muuta CSS-valitsinta. JavaScriptissä voit käyttää määritteen valitsimia document.querySelector()ja document.querySelectorAll().
Katso CodeSen-sovelluksen kynämääritteen valitsimet JS: ssä ja jQuery by CSS-Tricks (@ css-tricks).
Liittyvät
- luokassa
- Henkilötunnus
Lisää tietoa
- Laiha ominaisuusvalitsimissa
- Attribuuttivalitsimet MDN: ssä
- Attribuuttivalitsimet W3C CSS -määrittelyssä
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Minkä tahansa | Minkä tahansa | Minkä tahansa | Minkä tahansa | 7+ | Minkä tahansa | Minkä tahansa |