CSS3 introduces a wide range of new selectors. Effects such as striped table rows and star rating widgets, which previously required additional HTML or even the use of JavaScript, can now be implemented with pure CSS and minimal HTML. However, care must be taken to ensure older browsers correctly display content that uses these selectors. This page shows how to use the negation pseudo-class to hide style rules from browsers with incomplete support for CSS3 selectors.
Motivation
When viewing the form below in a modern web browser, the text field corresponding to the Other option is shown only when that option is selected.
This example uses the following HTML for the final field:
1 2 3 4 5 6 7 8 |
|
We can use the CSS3 :checked pseudo-class to hide the div element containing the text field unless the radio button is selected:
1 2 3 4 5 6 7 |
|
However, this technique causes problems for browsers that do not recognise the :checked pseudo-class. These browsers will apply the first rule but ignore the second, and hence will never display the text field.
The solution
A rarely-used selector introduced in CSS3 in the negation pseudo-class. This pseudo-class matches those elements not matched by its argument. For example, :not(div) matches elements that are not div elements.
We can incorporate the negation pseudo-class into our earlier code:
1 2 3 4 5 6 7 |
|
Because there is no HTML element called old, the selector :not(old) matches all elements, and therefore leaves the meaning of the rules unchanged. However, because all browsers that support the negation pseudo-class also support the :checked pseudo-class, browsers will either apply both rules or ignore both rules.