Not operator in css

@supports

The @supports CSS at-rule lets you specify CSS declarations that depend on a browser’s support for CSS features. Using this at-rule is commonly called a feature query. The rule must be placed at the top level of your code or nested inside any other conditional group at-rule.

Try it

In JavaScript, @supports can be accessed via the CSS object model interface CSSSupportsRule .

Syntax

The @supports at-rule consists of a block of statements with a supports condition. The supports condition is a set of one or more name-value pairs (e.g., : ).

@supports ()  /* If the condition is true, use the CSS in this block. */ > 

The conditions can be combined by conjunctions ( and ), disjunctions ( or ), and/or negations ( not ).

@supports () and ()  /* If both conditions are true, use the CSS in this block. */ > 

The precedence of operators can be defined with parentheses. Supports conditions can use either a : declaration syntax or a syntax. The following sections describe the use of each type of supports condition.

Declaration syntax

The declaration syntax checks if a browser supports the specified : declaration. The declaration must be surrounded by parentheses. The following example returns true and applies the CSS style if the browser supports the expression transform-origin: 5% 5% :

@supports (transform-origin: 5% 5%)  > 

Function syntax

The function syntax checks if a browser supports values or expressions within the function. The functions supported in the function syntax are described in the following sections.

selector() Experimental

This function evaluates if a browser supports the specified selector syntax. The following example returns true and applies the CSS style if the browser supports the child combinator:

font-tech()

This function checks if a browser supports the specified font technology for layout and rendering. The following example returns true and applies the CSS style if the browser supports the COLRv1 font technology:

@supports font-tech(color-COLRv1)  > 

The table below describes the available font technologies that can be queried using this function:

Technology	Supports
color-colrv0	Multi-colored glyphs via COLR version 0 table
color-colrv1	Multi-colored glyphs via COLR version 1 table
color-svg	SVG multi-colored tables
color-sbix	Standard bitmap graphics tables
color-cbdt	Color bitmap data tables
features-opentype	OpenType GSUB and GPOS tables
features-aat	TrueType morx and kerx tables
features-graphite	Graphite features, namely Silf , Glat , Gloc , Feat , and Sill tables
incremental	Incremental font loading
variations	Font variations in TrueType and OpenType fonts to control the font axis, weight, glyphs, etc.
palettes	Font palettes by means of font-palette to select one of many color palettes in the font

font-format()

This function checks if a browser supports the specified font format for layout and rendering. The following example returns true and applies the CSS style if the browser supports the opentype font format:

@supports font-format(opentype)  > 

The following table describes the available formats that can be queried with this function:

Format	Description	File extensions
collection	OpenType Collection	.otc , .ttc
embedded-opentype	Embedded OpenType	.eot
opentype	OpenType	.ttf , .otf
svg	SVG Font (deprecated)	.svg , .svgz
truetype	TrueType	.ttf
woff	WOFF 1.0 (Web Open Font Format)	.woff
woff2	WOFF 2.0 (Web Open Font Format)	.woff2

The not operator

The not operator precedes an expression resulting in the negation of the expression. The following returns true if the browser’s transform-origin property considers 10em 10em 10em to be invalid:

@supports not (transform-origin: 10em 10em 10em)  > 

As with any operator, the not operator can be applied to a declaration of any complexity. The following examples are both valid:

@supports not (not (transform-origin: 2px))  > @supports (display: grid) and (not (display: inline-grid))  > 

Note: There is no need to enclose the not operator between two parentheses at the top level. To combine it with other operators, like and and or , the parentheses are required.

The and operator

The and operator creates a new expression from the conjunction of two shorter expressions. It returns true only if both of the shorter expressions are also true. The following example returns true if and only if the two shorter expressions are simultaneously true:

@supports (display: table-cell) and (display: list-item)  > 

Multiple conjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

@supports (display: table-cell) and (display: list-item) and (display: contents)  > @supports (display: table-cell) and ((display: list-item) and (display: contents))  > 

The or operator

The or operator creates a new expression from the disjunction of two shorter expressions. It returns true if one or both of the shorter expressions is also true. The following example returns true if at least one of the two shorter expressions is true:

@supports (transform-style: preserve) or (-moz-transform-style: preserve)  > 

Multiple disjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) > @supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) > 

Note: When using both and and or operators, the parentheses must be used to define the order in which they apply. Otherwise, the condition is invalid and the whole rule is ignored.

Formal syntax

Examples

Testing for the support of a CSS property

@supports (animation-name: test)  /* CSS applied when animations are supported without a prefix */ @keyframes  /* Other at-rules can be nested inside */ > > 

Testing for the support of a given CSS property or a prefixed version

@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px)  /* CSS applied when text-stroke, prefixed or not, is supported */ > 

Testing for the non-support of a specific CSS property

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify))  /* CSS to provide fallback alternative for text-align-last: justify */ > 

Testing for the support of a selector

CSS conditional rules provide the ability to test for the support of a selector such as :has() .

/* This rule won't be applied in browsers that don't support :has() */ ul:has(> li li)  /* CSS is applied when the :has(…) pseudo-class is supported */ > @supports not selector(:has(a, b))  /* Fallback for when :has() is unsupported */ ul > li, ol > li  /* The above expanded for browsers that don't support :has(…) */ > > /* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) */ @supports selector(:nth-child(1n of a, b))  /* This rule needs to be inside the @supports block, otherwise it will be partially applied in browsers which don't support the `of` argument of :nth-child(…) */ :is(:nth-child(1n of ul, ol) a, details > summary)  /* CSS applied when the :is(…) selector and the `of` argument of :nth-child(…) are both supported */ > > 

Testing for the support of a font technology

The following example applies the CSS style if the browser supports the COLRv1 font technology:

@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice"); @supports font-tech(color-COLRv1)  font-family: "Bungee Spice"; > 

It’s also possible to test for the support of a font technology by using the tech function inside the @font-face at-rule. If a browser doesn’t support the font technology, a fallback font ( Bungee-fallback.otf ) can be used instead.

@font-face  font-family: "Bungee Spice"; src: url("https://fonts.googleapis.com/css2?family=Bungee+Spice") tech(color-COLRv1), url("Bungee-fallback.otf") format("opentype"); > 

Testing for the support of a font format

The following example applies the CSS style if the browser supports the woff2 font format:

@supports font-format(woff2)  font-family: "Open Sans"; src: url("open-sans.woff2") format("woff2"); > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Using feature queries
• The CSSOM class CSSSupportsRule , and the CSS.supports() method that allows the same check to be performed via JavaScript.

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS the :not() selector

In my previous post
I wrote a bit about the :not() selector and I got a lot feedback that people never heard of this element. So I figured I would dedicate a post just to the :not() CSS selector.

What is the :not() selector in CSS?

The :not() is a CSS pseudo-class that targets elements that do not match the selector given. Since it prevents specific items from being selected, it is known as the negation pseudo-class. In essence you can target anything except what you put in the :not() selector. Lets look at a quick example:

:not() rules

How to use the :not() selector with multiple classes

It is possible to use the :not() selector with multiple classes.

Normally you would just want to do:

But maybe you want to avoid multiple classes? There are no real combinators with :not() and you cannot nest them. But you can chain them, which works similar to and .

p:not(.foo):not(.bar):not(.bold):not(.italic)  > 

Tricks with :first-child, :last-child and :nth-child()

I use the :not() CSS selector most often with the :first-child or :last-child pseudo-class.

Think of having a list that you want to add some spacing to, but you don’t want to last item to also have spacing at the bottom right? Well with :not() that is super easy to solve!

li:not(:last-child)  margin-bottom: 20px; > 

You could also do the reverse with :first-child

li:not(:first-child)  margin-top: 20px; > 

li:not(:nth-child(2))  margin: 20px 0; > 

Here is a quick codepen sample to see it in action:

Conclusion

A lot of handy things can be achieved by using the :not() CSS selector. I know I use it a lot of times, for menus, list items and what not. Even flexbox grids!

I hope you learned something from this post, and hopefully you can enhance your CSS skills with this knowledge.

Let me know how you apply the :not() selector, I’m always eager to new learn tricks with it.

Источник