CSS :has() -valitsimen hallinta: Vapauta ylätason valinnan voima

Vuosien ajan CSS-kehittäjät ovat kaivanneet yksinkertaista ja tehokasta tapaa valita vanhempia elementtejä niiden lapsielementtien perusteella. Odotus on ohi! :has()-pseudoluokka on vihdoin täällä, ja se mullistaa tavan, jolla kirjoitamme CSS:ää. Tämä voimakas valitsin antaa sinun kohdistaa tyylin vanhempaan elementtiin, jos se sisältää tietyn lapsielementin, mikä avaa lukemattomia mahdollisuuksia dynaamiselle ja responsiiviselle tyylittelylle.

Mikä on :has()-valitsin?

:has()-pseudoluokka on CSS:n relaationaalinen pseudoluokka, joka hyväksyy argumenttinaan valitsinlistan. Se valitsee elementin, jos jokin valitsinlistan valitsimista vastaa vähintään yhtä elementtiä valitun elementin jälkeläisten joukossa. Yksinkertaisemmin sanottuna se tarkistaa, onko vanhemmalla elementillä tietty lapsi, ja jos on, vanhempi elementti valitaan.

Perussyntaksi on:

vanhempi:has(lapsi) { /* CSS-säännöt */ }

Tämä valitsee vanhempi-elementin vain, jos se sisältää vähintään yhden lapsi-elementin.

Miksi :has() on niin tärkeä?

Perinteisesti CSS:n kyky valita vanhempia elementtejä niiden lasten perusteella on ollut rajallinen. Tämä rajoitus on usein vaatinut monimutkaisia JavaScript-ratkaisuja tai kiertoteitä dynaamisen tyylittelyn saavuttamiseksi. :has()-valitsin poistaa tarpeen näille raskaille menetelmille, mikä mahdollistaa puhtaamman, helpommin ylläpidettävän ja suorituskykyisemmän CSS-koodin.

Tässä syitä, miksi :has() on mullistava:

Yksinkertaistettu tyylittely: Monimutkaiset tyylisäännöt, jotka aiemmin vaativat JavaScriptiä, voidaan nyt saavuttaa puhtaalla CSS:llä.
Parempi ylläpidettävyys: Puhdas ja ytimekäs CSS-koodi on helpompi ymmärtää, debugata ja ylläpitää.
Parannettu suorituskyky: Natiivien CSS-valitsimien käyttö johtaa yleensä parempaan suorituskykyyn verrattuna JavaScript-pohjaisiin ratkaisuihin.
Suurempi joustavuus: :has()-valitsin tarjoaa suurempaa joustavuutta dynaamisten ja responsiivisten suunnitelmien luomisessa.

Perusesimerkkejä :has()-valitsimesta

Aloitetaan muutamalla yksinkertaisella esimerkillä havainnollistamaan :has()-valitsimen voimaa.

Esimerkki 1: Vanhempi-divin tyylittely kuvan olemassaolon perusteella

Oletetaan, että haluat lisätä reunuksen <div>-elementtiin vain, jos se sisältää <img>-elementin:

div:has(img) {
  border: 2px solid blue;
}

Tämä CSS-sääntö lisää sinisen reunuksen mihin tahansa <div>-elementtiin, joka sisältää vähintään yhden <img>-elementin.

Esimerkki 2: Lista-alkion tyylittely span-elementin olemassaolon perusteella

Oletetaan, että sinulla on lista kohteita ja haluat korostaa listan kohtaa, jos se sisältää <span>-elementin tietyllä luokalla:

li:has(span.highlight) {
  background-color: yellow;
}

Tämä CSS-sääntö muuttaa minkä tahansa <li>-elementin taustavärin keltaiseksi, jos se sisältää <span>-elementin, jonka luokka on "highlight".

Esimerkki 3: Lomakkeen label-elementin tyylittely syötekentän kelpoisuuden perusteella

Voit käyttää :has()-valitsinta lomakkeen label-elementin tyylittelyyn sen perusteella, onko siihen liittyvä syötekenttä kelvollinen vai kelvoton (yhdistettynä :invalid-pseudoluokkaan):

label:has(+ input:invalid) {
  color: red;
  font-weight: bold;
}

Tämä tekee label-elementistä punaisen ja lihavoidun, jos sitä välittömästi seuraava syötekenttä on kelvoton.

Edistyneitä :has()-valitsimen käyttötapoja

:has()-valitsimesta tulee entistäkin tehokkaampi, kun se yhdistetään muihin CSS-valitsimiin ja pseudoluokkiin. Tässä muutamia edistyneitä käyttötapauksia:

Esimerkki 4: Elementtien kohdistaminen, joilta puuttuu tietty lapsielementti

Voit käyttää :not()-pseudoluokkaa yhdessä :has()-valitsimen kanssa kohdistaaksesi elementteihin, joilla *ei* ole tiettyä lasta. Esimerkiksi, tyylitelläksesi divejä, jotka *eivät* sisällä kuvia:

div:not(:has(img)) {
  background-color: #f0f0f0;
}

Tämä lisää vaaleanharmaan taustavärin mihin tahansa <div>-elementtiin, joka ei sisällä <img>-elementtiä.

Esimerkki 5: Monimutkaisten asettelujen luominen

:has()-valitsinta voidaan käyttää dynaamisten asettelujen luomiseen säiliön sisällön perusteella. Voit esimerkiksi muuttaa ruudukon asettelua sen perusteella, onko ruudukon solussa tietyntyyppinen elementti.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item:has(img) {
  grid-column: span 2;
}

Tämä saa ruudukon kohteen kattamaan kaksi saraketta, jos se sisältää kuvan.

Esimerkki 6: Dynaaminen lomakkeiden tyylittely

Voit käyttää :has()-valitsinta lomake-elementtien dynaamiseen tyylittelyyn niiden tilan perusteella (esim. ovatko ne kohdennettuja, täytettyjä tai kelvollisia).

.form-group:has(input:focus) {
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

.form-group:has(input:valid) {
  border-color: green;
}

.form-group:has(input:invalid) {
  border-color: red;
}

Tämä lisää sinisen laatikkovarjon, kun syötekenttä on kohdennettu, vihreän reunuksen, jos syöte on kelvollinen, ja punaisen reunuksen, jos syöte on kelvoton.

Esimerkki 7: Tyylittely lapsielementtien lukumäärän perusteella

Vaikka :has() ei suoraan laske lapsielementtien määrää, voit yhdistää sen muihin valitsimiin ja CSS-ominaisuuksiin saavuttaaksesi vastaavia vaikutuksia. Voit esimerkiksi käyttää :only-child-valitsinta tyylitelläksesi vanhemman, jos sillä on vain yksi tietyntyyppinen lapsi.

div:has(> p:only-child) {
  background-color: lightgreen;
}

Tämä tyylittelee <div>-elementin vaaleanvihreällä taustavärillä vain, jos se sisältää yhden ainoan <p>-elementin välittömänä lapsenaan.

Selainyhteensopivuus ja vararatkaisut

Vuoden 2023 lopulla :has()-valitsimella on erinomainen tuki moderneissa selaimissa, mukaan lukien Chrome, Firefox, Safari ja Edge. On kuitenkin ratkaisevan tärkeää tarkistaa yhteensopivuus Can I use -sivustolta ennen sen käyttöönottoa tuotannossa, erityisesti jos sinun on tuettava vanhempia selaimia.

Tässä erittely yhteensopivuusnäkökohdista:

Modernit selaimet: Erinomainen tuki uusimmissa Chrome-, Firefox-, Safari- ja Edge-versioissa.
Vanhemmat selaimet: Ei tukea vanhemmissa selaimissa (esim. Internet Explorer).

Vararatkaisujen tarjoaminen

Jos sinun on tuettava vanhempia selaimia, sinun on tarjottava vararatkaisuja. Tässä muutamia strategioita:

JavaScript: Käytä JavaScriptiä tunnistaaksesi selaimen tuen :has()-valitsimelle ja soveltaaksesi vaihtoehtoista tyylittelyä tarvittaessa.
Ominaisuuskyselyt: Käytä CSS:n ominaisuuskyselyjä (@supports) tarjotaksesi erilaisia tyylejä selain tuen perusteella.
Progressiivinen parantaminen: Aloita perustoimivalla suunnittelulla, joka toimii kaikissa selaimissa, ja paranna sitä progressiivisesti selaimille, jotka tukevat :has()-valitsinta.

Tässä esimerkki ominaisuuskyselyn käytöstä:

.parent {
  /* Perustyylittely kaikille selaimille */
  border: 1px solid black;
}

@supports selector(:has(img)) {
  .parent:has(img) {
    /* Paranneltu tyylittely selaimille, jotka tukevat :has()-valitsinta */
    border: 3px solid blue;
  }
}

Tämä koodi lisää mustan reunuksen .parent-elementtiin kaikissa selaimissa. Selaimissa, jotka tukevat :has()-valitsinta, se lisää sinisen reunuksen, jos .parent-elementti sisältää kuvan.

Suorituskykyyn liittyviä huomioita

Vaikka :has() tarjoaa merkittäviä etuja, on olennaista ottaa huomioon sen mahdollinen vaikutus suorituskykyyn, erityisesti kun sitä käytetään laajasti tai monimutkaisten valitsimien kanssa. Selaimien on arvioitava valitsin jokaiselle sivun elementille, mikä voi tulla laskennallisesti kalliiksi.

Tässä muutamia vinkkejä :has()-valitsimen suorituskyvyn optimoimiseksi:

Pidä valitsimet yksinkertaisina: Vältä liian monimutkaisten valitsimien käyttöä :has()-pseudoluokan sisällä.
Rajoita vaikutusaluetta: Sovella :has()-valitsinta tiettyihin elementteihin tai säiliöihin globaalisti soveltamisen sijaan.
Testaa suorituskyky: Käytä selaimen kehittäjätyökaluja CSS-sääntöjesi suorituskyvyn seuraamiseen ja mahdollisten pullonkaulojen tunnistamiseen.

Yleisiä vältettäviä virheitä

Kun työskentelet :has()-valitsimen kanssa, on helppo tehdä virheitä, jotka voivat johtaa odottamattomiin tuloksiin. Tässä muutamia yleisiä sudenkuoppia, joita kannattaa välttää:

Spesifisyysongelmat: Varmista, että :has()-säännöilläsi on riittävä spesifisyys ohittamaan muut CSS-säännöt. Käytä samoja spesifisyyden vianetsintävaiheita kuin aina ennenkin.
Virheellinen sisäkkäisyys: Tarkista elementtiesi sisäkkäisyys varmistaaksesi, että :has()-valitsin kohdistuu oikeaan vanhempaan elementtiin.
Liian monimutkaiset valitsimet: Vältä liian monimutkaisten valitsimien käyttöä :has()-pseudoluokan sisällä, koska tämä voi vaikuttaa suorituskykyyn.
Oletus välittömistä lapsista: Muista, että :has() tarkistaa *kaikki* jälkeläiset, ei vain välittömiä lapsia. Käytä välittömän lapsen kombinaattoria (>), jos sinun on kohdistettava vain välittömiin lapsiin (esim. div:has(> img)).

Parhaat käytännöt :has()-valitsimen käyttöön

Maksimoidaksesi :has()-valitsimen hyödyt ja välttääksesi mahdolliset ongelmat, noudata näitä parhaita käytäntöjä:

Käytä harkitusti: Käytä :has()-valitsinta vain, kun se tarjoaa selkeän edun muihin CSS-tekniikoihin tai JavaScript-ratkaisuihin verrattuna.
Pidä se yksinkertaisena: Suosi yksinkertaisia, luettavia valitsimia monimutkaisten ja koukeroisten sijaan.
Testaa perusteellisesti: Testaa CSS-sääntösi eri selaimilla ja laitteilla varmistaaksesi, että ne toimivat odotetusti.
Dokumentoi koodisi: Lisää kommentteja CSS-koodiisi selittääksesi :has()-sääntöjesi tarkoituksen ja toiminnallisuuden.
Harkitse saavutettavuutta: Varmista, että :has()-valitsimen käyttö ei vaikuta negatiivisesti saavutettavuuteen. Älä esimerkiksi luota pelkästään :has()-valitsimen laukaisemiin tyylimuutoksiin tärkeän tiedon välittämisessä; käytä ARIA-attribuutteja tai vaihtoehtoisia mekanismeja vammaisille käyttäjille.

Tosielämän esimerkkejä ja käyttötapauksia

Tutkitaanpa muutamia tosielämän esimerkkejä siitä, kuinka :has()-valitsinta voidaan käyttää yleisten suunnitteluhaasteiden ratkaisemiseen.

Esimerkki 8: Responsiivisten navigaatiovalikoiden luominen

Voit käyttää :has()-valitsinta luodaksesi responsiivisia navigaatiovalikoita, jotka mukautuvat eri näyttökokoihin tiettyjen valikkokohtien olemassaolon perusteella.

Kuvittele tilanne, jossa haluat näyttää erilaisen navigaatiovalikon riippuen siitä, onko käyttäjä kirjautunut sisään vai ei. Jos hän on kirjautunut sisään, saatat näyttää profiili- ja uloskirjautumistoiminnot, jos ei, saatat näyttää sisäänkirjautumisen/rekisteröitymisen.

nav:has(.user-profile) {
  /* Tyylit sisäänkirjautuneille käyttäjille */
}

nav:not(:has(.user-profile)) {
  /* Tyylit uloskirjautuneille käyttäjille */
}

Esimerkki 9: Korttikomponenttien tyylittely

:has()-valitsinta voidaan käyttää korttikomponenttien tyylittelyyn niiden sisällön perusteella. Voit esimerkiksi lisätä varjon kortille vain, jos se sisältää kuvan.

.card:has(img) {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Esimerkki 10: Dynaamisten teemojen toteuttaminen

Voit käyttää :has()-valitsinta dynaamisten teemojen toteuttamiseen käyttäjän mieltymysten tai järjestelmäasetusten perusteella. Voit esimerkiksi muuttaa sivun taustaväriä sen mukaan, onko käyttäjä ottanut käyttöön tumman tilan.

body:has(.dark-mode) {
  background-color: #333;
  color: #fff;
}

Nämä esimerkit havainnollistavat :has()-valitsimen monipuolisuutta ja sen kykyä ratkaista laaja valikoima suunnitteluhaasteita.

CSS:n tulevaisuus: Mitä seuraavaksi?

:has()-valitsimen käyttöönotto merkitsee merkittävää edistysaskelta CSS:n kehityksessä. Se antaa kehittäjille mahdollisuuden luoda dynaamisempia, responsiivisempia ja ylläpidettävämpiä tyylisivuja vähemmällä riippuvuudella JavaScriptistä. Kun :has()-valitsimen selaintuki kasvaa jatkuvasti, voimme odottaa näkevämme entistä innovatiivisempia ja luovempia käyttötapoja tälle tehokkaalle valitsimelle.

Tulevaisuudessa CSS Working Group tutkii muita jännittäviä ominaisuuksia ja parannuksia, jotka laajentavat edelleen CSS:n ominaisuuksia. Näitä ovat muun muassa:

Säiliökyselyt (Container Queries): Mahdollistavat komponenttien mukauttaa tyylittelyään säiliönsä koon mukaan, ei näkymän (viewport) koon.
Kaskadikerrokset (Cascade Layers): Tarjoavat enemmän hallintaa CSS-sääntöjen kaskadiin ja spesifisyyteen.
Edistyneemmät valitsimet: Uusien valitsimien käyttöönotto, jotka voivat kohdistaa elementteihin niiden attribuuttien, sisällön ja sijainnin perusteella dokumenttipuussa.

Pysymällä ajan tasalla uusimmista CSS-kehityksistä ja omaksumalla uusia ominaisuuksia, kuten :has(), kehittäjät voivat vapauttaa CSS:n täyden potentiaalin ja luoda todella poikkeuksellisia verkkokokemuksia.

Yhteenveto

:has()-valitsin on tehokas lisä CSS-työkalupakkiin, joka mahdollistaa vanhemman elementin valinnan ja avaa uusia mahdollisuuksia dynaamiselle ja responsiiviselle tyylittelylle. Vaikka selaimen yhteensopivuus ja suorituskykyvaikutukset on otettava huomioon, :has()-valitsimen käytön hyödyt puhtaamman, ylläpidettävämmän ja suorituskykyisemmän CSS-koodin saavuttamiseksi ovat kiistattomat. Ota tämä mullistava valitsin käyttöösi ja mullista CSS-tyylisi jo tänään!

Muista ottaa huomioon saavutettavuus ja tarjota varamekanismeja vanhemmille selaimille. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit hyödyntää :has()-valitsimen täyden potentiaalin ja luoda todella poikkeuksellisia verkkokokemuksia käyttäjille ympäri maailmaa.