What does :not means exactly?

HTML-CSS
1

Like for example what this does?

svg:not(:root) {
	overflow: hidden;
}

and :root?

Thanks!

2

Often it is easiest to have a set of rules for an element, then specific rules for an alternative state, but then sometimes it is easier to invert that, which you can do by using :not. Maybe by doing so you reduce the amount of CSS you need to write, or it means you don’t have to add classes to the markup.

input:not([type="checkbox"]) {

.input-group:not(.active) {

Your example selects any SVG element that is not the root element.

The root element is the top-level element .

In the HTML DOM, the root is the <html> element, but CSS works with other things, so for example, in the SVG DOM, the top-level element will be <svg>.

You can nest SVG inside SVG, so this would select only the nested SVG elements in an SVG file. Whether you would want to nest them is another matter (I can think of only one semi-common case, where you use the defs element in SVG to reference a set of images to use for icons).

2 Likes