IN DEZE HANDLEIDING:
Hoe richt je op alles behalve een bepaalde stijl, class of span in CSS
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 een bepaalde 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;
}