Hallo allemaal, geweldige ontwikkelaars daar! In dit bericht gaan we het gebruik van verkennen :has() in uw volgende webproject. :has() is relatief nieuw, maar heeft aan populariteit gewonnen in de front-endgemeenschap door controle te geven over verschillende elementen in uw gebruikersinterface. Laten we eens kijken naar wat de pseudo-klasse is en hoe we deze kunnen gebruiken.

Syntaxis

De :has() CSS-pseudoklasse helpt bij het stylen van een element als de dingen die we erin zoeken, worden gevonden en verantwoord. Het is alsof je zegt: "Als er iets specifieks in deze doos zit, stijl de doos dan op deze manier EN alleen op deze manier."

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

Het stylingprobleem

In de afgelopen jaren hadden we geen manier om een ​​bovenliggend element gebaseerd op een direct kind van dat bovenliggende element op te maken met CSS of een element gebaseerd op een ander element. Als we dat zouden moeten doen, zouden we wat JavaScript moeten gebruiken en klassen aan/uit moeten zetten op basis van de structuur van de HTML. :has() dat probleem opgelost.

Stel dat u een element op kopniveau 1 heeft (h1) dat is de titel van een bericht of iets van die aard op een bloglijstpagina, en dan heb je een kopniveau 2 (h2) dat er direct op volgt. Deze h2 zou een ondertitel voor de post kunnen zijn. Als dat h2 is aanwezig, belangrijk en direct na de h1, wil je misschien dat h1 opvallen. Vroeger moest je een JS-functie schrijven.

Old School-manier – JavaScript

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

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

Deze JS-functie zoekt naar alle h1's met een h2 verdergaan, en een klasse van hoogtepunt-inhoud toepassen om de h1 opvallen als een belangrijk artikel.

Nieuw en verbeterd met moderne CSS die populair wordt! De mogelijkheden van wat we in de browser kunnen doen, hebben een lange weg afgelegd. We kunnen nu profiteren van CSS om dingen te doen die we traditioneel met JavaScript zouden moeten doen, niet alles, maar sommige dingen.

Nieuwe schoolweg – CSS

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

Gooi er wat :has() op!

Nu kunt u gebruiken :has() om hetzelfde te bereiken als de JS-functie. Deze CSS controleert op elke h1 en gebruikt de broer/zus combinator controleer op een h2 die er onmiddellijk op volgt, en voegt de kleur blauw toe aan de tekst. Hieronder vindt u een aantal gebruiksscenario's van wanneer :has() kan van pas komen.

:heeft Selectorvoorbeeld 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;
}

:heeft Selectorvoorbeeld 2

Vaak manipuleren of werken wij als werkers op internet met afbeeldingen. Daar zouden we hulpmiddelen voor kunnen gebruiken Cloudinary biedt de mogelijkheid om gebruik te maken van verschillende transformaties op onze afbeeldingen, maar meestal willen we slagschaduwen, randradii en bijschriften toevoegen (niet te verwarren met alternatieve tekst in een alt-attribuut).

Het onderstaande voorbeeld gebruikt :has() om te zien of een figuur of afbeelding een figcaption-element heeft en als dat het geval is, wordt er een achtergrond en een randradius toegepast om de afbeelding te laten opvallen.

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 ik :has() dat?

Je kan dat zien :has() heeft geweldige ondersteuning in moderne browsers.

:has() in de gemeenschap!

Ik heb contact opgenomen met mijn netwerk op Twitter om te zien hoe mijn collega's het gebruikten :has() in hun dagelijkse werk en dit is wat ze erover te zeggen hadden.

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

Het is geweldig om te zien hoe communityleden moderne CSS gebruiken om problemen uit de echte wereld op te lossen, en ook een schreeuw naar Abbey die het gebruikt om toegankelijkheidsredenen!

Dingen om in gedachten te houden

Er zijn een paar belangrijke punten waarmee u rekening moet houden bij het gebruik :has() Opsommingstekens waarnaar wordt verwezen vanaf MDN.

• De pseudoklasse neemt in zijn argument de specificiteit over van de meest specifieke selector
• Indien de :has() pseudo-klasse zelf wordt niet ondersteund in een browser, het hele selectorblok zal falen tenzij :has() staat in een vergevingsgezinde keuzelijst, zoals in :is() en :where()
• De :has() pseudo-klasse kan niet in een andere klasse worden genest :has() 
• Pseudo-elementen zijn ook geen geldige selectors binnen :has() en pseudo-elementen zijn geen geldige ankers voor :has()

Conclusie

Benutten van de kracht van CSS, inclusief geavanceerde functies zoals de :has() pseudo-klasse, stelt ons in staat uitzonderlijke webervaringen te creëren. De sterke punten van CSS liggen in de cascade en specificiteit ervan... het beste deel, waardoor we het volledige potentieel ervan kunnen benutten. Door de mogelijkheden van CSS te omarmen, kunnen we webontwerp en -ontwikkeling vooruit helpen, nieuwe mogelijkheden ontsluiten en baanbrekende gebruikersinterfaces creëren.

Links:

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• PlatoData.Network Verticale generatieve AI. Versterk jezelf. Toegang hier.
• PlatoAiStream. Web3-intelligentie. Kennis versterkt. Toegang hier.
• PlatoESG. carbon, CleanTech, Energie, Milieu, Zonne, Afvalbeheer. Toegang hier.
• Plato Gezondheid. Intelligentie op het gebied van biotech en klinische proeven. Toegang hier.
• Bron: https://css-tricks.com/the-power-of-has-in-css/