Hej alla underbara utvecklare där ute! I det här inlägget ska vi utforska användningen av :has() i ditt nästa webbprojekt. :has() är relativt ny men har vunnit popularitet i frontend-gemenskapen genom att leverera kontroll över olika element i ditt användargränssnitt. Låt oss ta en titt på vad pseudoklassen är och hur vi kan använda den.

syntax

Smakämnen :has() CSS-pseudoklass hjälper till att utforma ett element om någon av de saker vi letar efter i det hittas och redovisas. Det är som att säga, "Om det finns något specifikt inuti den här lådan, stil då lådan så här OCH bara på det här sättet."

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

”Den funktionella :has() CSS-pseudoklass representerar ett element om någon av de relativa väljare som skickas som ett argument matchar minst ett element när det är förankrat mot detta element. Denna pseudoklass presenterar ett sätt att välja ett överordnat element eller ett tidigare syskonelement med avseende på ett referenselement genom att ta en relativ väljarlista som ett argument."

För en mer robust förklaring, MDN gör det perfekt

Stylingproblemet

Tidigare har vi inte haft något sätt att utforma ett föräldraelement baserat på ett direkt underordnat till den föräldern med CSS eller ett element baserat på ett annat element. I den chansen vi hade att göra det, skulle vi behöva använda lite JavaScript och växla klasser på/av baserat på HTML-strukturen. :has() löste det problemet.

Låt oss säga att du har ett rubriknivå 1-element (h1) det är titeln på ett inlägg eller något i den stilen på en blogglistsida, och sedan har du en rubrik nivå 2 (h2) som följer direkt. Denna h2 kan vara en underrubrik för inlägget. Om det h2 är närvarande, viktig och direkt efter h1, du kanske vill göra att h1 sticker ut. Innan du skulle ha behövt skriva en JS-funktion.

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');
  }
});

Den här JS-funktionen letar efter alla h1:or som har en h2 fortsätter det och tillämpar en klass av highlight-innehåll för att göra h1 framstå som en viktig artikel.

Nytt och förbättrat med dagens CSS på ingång! Möjligheterna för vad vi kan göra i webbläsaren har kommit långt. Vi kan nu dra nytta av CSS för att göra saker som vi traditionellt skulle ha att göra med JavaScript, inte allt, men vissa saker.

New School Way – CSS

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

Kasta lite :has() på det!

Nu kan du använda :has() för att uppnå samma sak som JS-funktionen gjorde. Denna CSS letar efter någon h1 och använder syskonkombinator letar efter en h2 som omedelbart följer den och lägger till färgen blå till texten. Nedan finns ett par användningsfall av när :has() kan komma till hands.

:har väljare Exempel 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 väljare Exempel 2

Många gånger manipulerar vi som arbetare på webben eller arbetar med bilder. Vi skulle kunna använda verktyg som Cloudinary tillhandahåller att använda olika transformationer på våra bilder, men vanligtvis vill vi lägga till skuggor, border-radii och bildtexter (inte att förväxla med alternativ text i ett alt-attribut).

Exemplet nedan använder :has() för att se om en figur eller bild har ett figcaption-element och om det har det applicerar den lite bakgrund och en kantradie för att få bilden att sticka 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 jag :has() den där?

Du kan se det :has() har bra stöd i moderna webbläsare.

:has() i samhället!

Jag kontaktade mitt nätverk på Twitter för att se hur mina kamrater använde :has() i sitt dagliga arbete och detta är vad de hade att säga om det.

"Ett exempel jag har är att styla en specifik SVG från ett paket från tredje part @såsöppen eftersom jag inte kunde styla den direkt.”

Det här är vad Nick Taylor från OpenSauced hade att säga om användningen :has().

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

Lol senast jag använde det byggde jag in tangentbordsfunktioner i en trädvy, så jag behövde upptäcka tillstånd och klasser av syskonelement, men det fanns inte i Firefox än så jag var tvungen att hitta en annan lösning. 🫠

Abbey Perini från Nexcor Food Safety Technologies, Inc.

Det är fantastiskt att se hur communitymedlemmar använder modern CSS för att lösa verkliga problem, och även ett shout out till Abbey som använder det av tillgänglighetsskäl!

Saker att tänka på

Det finns några viktiga punkter att tänka på när du använder :has() Punktpunkter refererade från MDN.

• Pseudoklassen antar specificiteten hos den mest specifika väljaren i sitt argument
• Om :has() pseudo-klassen i sig stöds inte i en webbläsare, hela väljarblocket kommer att misslyckas om inte :has() finns i en förlåtande väljarlista, till exempel i :is() och :where()
• Smakämnen :has() pseudoklass kan inte kapslas in i en annan :has() 
• Pseudo-element är inte heller giltiga väljare inom :has() och pseudo-element är inte giltiga ankare för :has()

Slutsats

Utnyttja kraften i CSS, inklusive avancerade funktioner som :has() pseudoklass, ger oss möjlighet att skapa exceptionella webbupplevelser. CSS:s styrkor ligger i dess kaskad och specificitet ... den bästa delen, som gör att vi kan utnyttja dess fulla potential. Genom att ta till oss funktionerna i CSS kan vi driva webbdesign och utveckling framåt, låsa upp nya möjligheter och skapa banbrytande användargränssnitt.

Länkar:

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• PlatoData.Network Vertical Generative Ai. Styrka dig själv. Tillgång här.
• PlatoAiStream. Web3 Intelligence. Kunskap förstärkt. Tillgång här.
• Platoesg. Kol, CleanTech, Energi, Miljö, Sol, Avfallshantering. Tillgång här.
• PlatoHealth. Biotech och kliniska prövningar Intelligence. Tillgång här.
• Källa: https://css-tricks.com/the-power-of-has-in-css/