Hei alle dere fantastiske utviklere der ute! I dette innlegget skal vi utforske bruken av :has() i ditt neste nettprosjekt. :has() er relativt ny, men har vunnet popularitet i grensesnittfellesskapet ved å levere kontroll over ulike elementer i brukergrensesnittet ditt. La oss ta en titt på hva pseudoklassen er og hvordan vi kan bruke den.

syntax

De :has() CSS-pseudo-klasse hjelper til med å style et element hvis noen av tingene vi søker etter i det blir funnet og gjort rede for. Det er som å si, "Hvis det er noe spesifikt inne i denne boksen, stil boksen på denne måten OG bare på denne måten."

:has(<direct-selector>) {
  /* ... */
}

«Det funksjonelle :has() CSS-pseudoklasse representerer et element hvis noen av de relative velgerne som sendes som et argument samsvarer med minst ett element når de er forankret mot dette elementet. Denne pseudoklassen presenterer en måte å velge et overordnet element eller et tidligere søskenelement med hensyn til et referanseelement ved å ta en relativ velgerliste som et argument."

For en mer robust forklaring, DND gjør det perfekt

Stylingproblemet

I tidligere år hadde vi ingen måte å style et overordnet element basert på et direkte underordnet av den forelderen med CSS eller et element basert på et annet element. I sjansen vi hadde til å gjøre det, måtte vi bruke litt JavaScript og slå klasser på/av basert på strukturen til HTML. :has() løst det problemet.

La oss si at du har et overskriftsnivå 1-element (h1) det er tittelen på et innlegg eller noe av den art på en blogglisteside, og så har du en overskrift nivå 2 (h2) som følger direkte. Denne h2 kan være en underoverskrift for innlegget. Hvis det h2 er tilstede, viktig og rett etter h1, vil du kanskje få den h1 til å skille seg ut. Før måtte du skrive en JS-funksjon.

Old School Way – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Denne JS-funksjonen ser etter alle h1-ene som har en h2 fortsetter det, og bruker en klasse med høydepunktinnhold for å lage h1 fremstå som en viktig artikkel.

Nytt og forbedret med moderne CSS på vei! Mulighetene til det vi kan gjøre i nettleseren har kommet langt. Vi kan nå dra nytte av CSS for å gjøre ting som vi tradisjonelt ville ha å gjøre med JavaScript, ikke alt, men noen ting.

New School Way – CSS

h1:has(+ h2) {
    color: blue;
}

Kast noen :har() på den!

Nå kan du bruke :has() for å oppnå det samme som JS-funksjonen gjorde. Denne CSS-en ser etter hvilken som helst h1 og bruker søskenkombinator se etter en h2 som umiddelbart følger den, og legger til fargen blå i teksten. Nedenfor er et par brukstilfeller av når :has() kan komme godt med.

:har velgereksempel 1

HTML

<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
	<h1>Lorem, ipsum dolor.</h1>
	<h2>Lorem ipsum dolor sit amet.</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

	<h1>This is a test</h1>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:har velgereksempel 2

Mange ganger manipulerer vi som arbeidere på nettet eller jobber med bilder. Vi kan bruke verktøy som Skyet gir å gjøre bruk av ulike transformasjoner på bildene våre, men vanligvis ønsker vi å legge til skygger, border-radii og bildetekster (ikke å forveksle med alternativ tekst i en alt-attributt).

Eksemplet nedenfor bruker :has() for å se om en figur eller et bilde har et figcaption-element, og hvis det gjør det, bruker det litt bakgrunn og en kantradius for å få bildet til å skille seg ut.

HTML

<section>
	<figure>
		<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
		<figcaption>My Aunt Sally's Doggo</figcaption>
	</figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Kan jeg :has() det?

Du kan se det :has() har god støtte på tvers av moderne nettlesere.

:has() i samfunnet!

Jeg tok kontakt med nettverket mitt på Twitter for å se hvordan mine jevnaldrende brukte :has() i deres daglige arbeid, og dette er hva de hadde å si om det.

"Et eksempel jeg har er å style en spesifikk SVG fra en tredjepartspakke @saucedopen fordi jeg ikke kunne style den direkte.»

Dette er hva Nick Taylor fra OpenSauced hadde å si om bruk :has().

svg:has(> #Mail) {
  stroke-width: 1;
}

Lol sist jeg brukte det, bygget jeg tastaturfunksjonalitet inn i en trevisning, så jeg trengte å oppdage tilstander og klasser av søskenelementer, men det var ikke i Firefox ennå, så jeg måtte finne en annen løsning. 🫠

Abbey Perini fra Nexcor Food Safety Technologies, Inc.

Det er flott å se hvordan fellesskapsmedlemmer bruker moderne CSS for å løse problemer i den virkelige verden, og også et rop til Abbey som bruker det av tilgjengelighetsgrunner!

Ting å huske på

Det er noen viktige punkter å huske på når du bruker :has() Kulepunkter referert fra MDN.

• Pseudoklassen tar på seg spesifisiteten til den mest spesifikke velgeren i argumentet
• Dersom :has() pseudo-klassen i seg selv støttes ikke i en nettleser, hele velgerblokken vil mislykkes med mindre :has() er i en tilgivende velgerliste, for eksempel i :is() og :where()
• De :has() pseudo-klasse kan ikke nestes i en annen :has() 
• Pseudo-elementer er heller ikke gyldige velgere innenfor :has() og pseudo-elementer er ikke gyldige ankere for :has()

konklusjonen

Utnytte kraften til CSS, inkludert avanserte funksjoner som :has() pseudo-klasse, gir oss mulighet til å lage eksepsjonelle nettopplevelser. CSS sine styrker ligger i dens kaskade og spesifisitet ... den beste delen, som lar oss utnytte dets fulle potensial. Ved å omfavne mulighetene til CSS kan vi drive webdesign og utvikling fremover, låse opp nye muligheter og skape banebrytende brukergrensesnitt.

lenker:

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• PlatoData.Network Vertical Generative Ai. Styrk deg selv. Tilgang her.
• PlatoAiStream. Web3 Intelligence. Kunnskap forsterket. Tilgang her.
• PlatoESG. Karbon, CleanTech, Energi, Miljø, Solenergi, Avfallshåndtering. Tilgang her.
• PlatoHelse. Bioteknologisk og klinisk etterretning. Tilgang her.
• kilde: https://css-tricks.com/the-power-of-has-in-css/