IN DEZE HANDLEIDING:
Alles behalve een bepaalde stijl, class of span in CSS aanpassen
De specificiteit van de :not pseudo-klasse is de specificiteit van haar argument. De :not() pseudo-klasse voegt niets toe aan de specificiteit van de selector, in tegenstelling tot andere pseudo-klassen.
Negaties mogen niet genest worden, dus :not(:not(…)) is nooit toegestaan. Auteurs moeten er ook op letten dat, aangezien pseudo-elementen niet als een eenvoudige selector worden beschouwd, ze niet geldig zijn als argument voor :not(X).
Let op bij het gebruik van attribuutselectors, aangezien sommige niet zo breed worden ondersteund als andere. Het is toegestaan :not-selectors te koppelen aan andere :not-selectors.
Browserondersteuning :not CSS
De :not() pseudoklasse is bijgewerkt in de CSS Selectors Level 4 specificatie om een argumentlijst toe te laten. In CSS Selectors Level 3 kon deze alleen een enkele eenvoudige selector accepteren. Als gevolg daarvan is de browserondersteuning een beetje verdeeld tussen de niveau 3- en niveau 4-ontwerpen.
Voorbeeld stijl, class of span uitsluiten in CSS met :not
:not(X) {
property: value;
}
/* Style alles behalve de .anders-cursuswp.com klasse */
li:not(.different) {
font-size: 3em;
}
Voorbeelden :not pseudo-klasse in html
See the Pen :not(X) by Chris Coyier (@chriscoyier) on CodePen.
See the Pen Complex :not() by CSS-Tricks (@css-tricks) on CodePen.
CSS tekst aanpassen Gutenberg maar niet in page builder
Wil je je CSS voor tekst aanpassen voor Gutenberg maar niet in page builder? Dat kan met de :not selector.
Hier zie je een CSS voorbeeld van tekst die wel in Gutenberg maar niet in beaver builder wordt aangepast:
.entry-content p:not(.fl-rich-text p) {
font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1.125rem);
line-height: clamp(1.4rem, 0.8vw + 1.2rem, 1.8rem);
max-width:45ch;
}
Class wel of niet laten zien door categorie in WordPress
Class op een post wel laten zien als de post WEL in een categorie zit of een class op een post wel of niet laten zien als de post NIET in een categorie zit. Dit is handig bij een taal switcher of vlaggetje:
Class niet laten zien als deze buiten een categorie valt.
In dit geval wordt de class menu-nl nooit laten zien op elke post in de post catnaam:
/* class menu-nl WEL laten zienals deze BINNEN een categorie catnaam valt */
.category-catnaam .menu-nl {display:none!important;}In dit geval wordt de class menu-eng nooit laten zien op elke post die niet in de categorie catnaam staat:
/* class menu-en NIET laten zienals deze BUITEN een categorie catnaam valt */
.menu-eng:not(.category-catnaam .menu-eng) {display:none!important;} Ik heb dit toegepast op deze website met 2 talen:
https://pureofftheroad.com
Zo zie je de :not pseudo-klasse in CSS is heel handig.