CSS :not() Selector

The :not() selector in CSS is used to select elements that do not match a specific selector. This allows you to target elements based on what they are not, rather than what they are.

Here is the syntax for the :not() selector:

:not(selector) {
  /* styles */
}

For example, if you want to select all paragraphs that are not inside a <div> element, you can use the following CSS:

p:not(div) {
  color: blue;
}

Result:

This paragraph is not inside a div.

This paragraph is inside a div.

In the example above, the first paragraph will have a blue color because it is not inside a <div> element, while the second paragraph will not be affected by the CSS rule.

The :not() selector can also be used with more complex selectors. For instance, if you want to select all list items that are not the first child of an unordered list, you can use the following CSS:

ul li:not(:first-child) {
  font-weight: bold;
}

Result:

Item 1
Item 2
Item 3

In this example, only the second and third list items will have a bold font weight, as they are not the first child of the unordered list.

Keep in mind that the :not() selector is not supported in Internet Explorer 8 and earlier versions. Make sure to check browser compatibility before using this selector in your CSS.