data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla
Tyylittele elementtejä ehdollisesti data-attribuuttien arvojen perusteella
data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
CSS-attribuuttivalitsimet
CSS-attribuuttivalitsimet kohdistavat elementteihin attribuutin olemassaolon ja arvon perusteella: [data-state] kohdistuu kaikkiin elementteihin, joilla on data-state-attribuutti; [data-state="active"] kohdistuu vain silloin, kun arvo on "active".
Läsnäolovalitsin
[data-tooltip] kohdistuu elementteihin, joilla on data-tooltip-attribuutti arvosta riippumatta. Sen avulla voidaan määrittää työkaluvihjeiden perustyylit kaikille elementeille, joihin työkaluvihjetiedot on liitetty, ennen työkaluvihjeen sisällön käsittelyä.
Täsmällisen osuman valitsin
[data-theme="dark"] kohdistuu vain elementteihin, joiden data-theme-arvo on täsmälleen "dark". Tämä mahdollistaa teemaperusteisen tyylittelyn: tummat väritunnisteet otetaan käyttöön, kun JavaScript on asettanut html-elementille data-theme="dark"-arvon.
Osittaisen osuman valitsimet
[data-icon^="arrow"] kohdistuu arvoihin, jotka alkavat merkkijonolla "arrow". [data-label$="ing"] kohdistuu arvoihin, jotka päättyvät merkkijonoon "ing". [data-tag*="feature"] kohdistuu arvoihin, jotka sisältävät merkkijonon "feature". Näiden avulla voidaan tyylitellä elementtejä kuvioiden perusteella lisäämättä lukuisia luokkia.
Tilakone data-*-attribuuteilla
Mallintakaa komponentin tila data-state-attribuuteilla: [data-state="idle"], [data-state="loading"], [data-state="error"]. Kunkin tilan CSS-säännöt korvaavat useat ehdolliset luokkanimet, jolloin tila säilyy yhdessä attribuutissa ja tyylit pysyvät selkeästi erillään.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Attribuuttivalitsinten spesifisyys
Attribuuttivalitsimilla on sama spesifisyys kuin luokkavalitsimilla (0,1,0). Kun ne yhdistetään elementtivalitsimiin, button[data-variant="primary"] -valitsimen spesifisyys on (0,1,1). Suunnitelkaa attribuuttivalitsinten spesifisyys yhdessä luokkapohjaisten sääntöjen kanssa ristiriitojen välttämiseksi.
Työkaluvihjeen malli
data-tooltip-attribuuttia käyttävä pelkkää CSS:ää hyödyntävä työkaluvihje: käyttäkää leijuttaessa sääntöä ::after { content: attr(data-tooltip) }. content: attr()-funktio lukee attribuutin arvon ja käyttää sitä pseudoelementin sisältönä — JavaScriptiä tai ylimääräisiä HTML-elementtejä ei tarvita.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* vai class tyylittelyssä
Käyttäkää luokkia tyylittelyn tarkoitukseen (is-active, has-error) ja data-attribuutteja tietosisältöön (data-user-id, data-count). Kun sama attribuutti ohjaa sekä toimintaa (JavaScript lukee sitä) että tyylittelyä (CSS valitsee sen perusteella), data-* poistaa JavaScriptin ja CSS:n välisen päällekkäisyyden.
data-*-valitsinten yhdistäminen
Ketjuttakaa useita attribuuttivalitsimia: [data-type="button"][data-size="large"] kohdistuu elementteihin, joihin molemmat attribuutit on asetettu. Näin voidaan tehdä yhdistelmäkohdistuksia ilman yhdistettyä luokkaa, kuten .button-large, mikä vähentää luokkien määrää.
Suorituskykyä koskeva huomautus
Attribuuttivalitsimet ovat tyylien ratkaisemisessa hieman hitaampia kuin luokkavalitsimet. Suosikaa luokkia staattisissa tyyleissä. Käyttäkää attribuuttivalitsimia, kun attribuutin arvo ohjaa tyyliä, kuten data-state tai data-theme, ja arvo muuttuu ajon aikana — tällöin yksi attribuutti korvaa useita vaihdettavia luokkia.
Kirjainkoon huomioiminen
Oletusarvoisesti attribuutin arvon vertailu on HTML:ssä kirjainkokoherkkää (mutta ei XHTML:n kielikoodeissa). Lisää i-lippu kirjainkoosta riippumattomaan vertailuun: [data-state="Active" i] kohdistuu arvoihin "active", "Active" ja "ACTIVE".
Tietotarkistus
Mitä CSS-valitsin [data-state="loading"] .spinner tekee?
Yhteenveto
CSS-attribuuttivalitsimet kohdistavat data-*-attribuutteihin niiden olemassaolon, täsmällisen arvon tai osittaisten kuvioiden perusteella. Yhdessä työkaluvihjeiden content: attr()-funktion ja komponenttien tilakoneiden data-state-attribuutin kanssa data-*-attribuutit toimivat sekä tietojen välittäjinä että CSS:n tyylittelykoukkuina ilman luokkien tarpeetonta lisääntymistä.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla”?
Tyylittele elementtejä ehdollisesti data-attribuuttien arvojen perusteella Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- data-*-syntaksi ja nimeämiskäytännöt
- data-*-attribuuttien käyttö datasetillä JavaScriptissä
- data-*-attribuuttien käyttö CSS-attribuuttivalitsimilla
- Käytännön kuviot: työkaluvihjeet ja tilan seuranta