The Cross-Browser Compatibility Guide – CSS Selectors Browser Support
The Cross-Browser Compatibility Guide – CSS Selectors Browser Support
browseemall
Welcome to the third part of the cross-browser compatibility guide.
CSS selectors browser support
In this post I would like to show which CSS selectors are supported in the different browsers.
CSS 2 Selectors
CSS level 2 specification was developed by the W3C and published as a recommendation in May 1998. CSS2 is the improvement of CSS1. It removed the not fully interoperable features. It also included the browser extensions. Today all current versions of major browsers support every CSS 2 Selector.
| Selector | Chrome | Edge | Firefox | Safari | Opera | Description |
| E:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 | Selects the active link |
| E:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 | Selects link on mouse over |
| E:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 | Selects the input element which has focus |
| * | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 | Selects all elements |
| E | Yes | Yes | Yes | Yes | Yes | Matches any E element (i.e., an element of type E). |
| E:before | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 | Insert something before the content of each <E> element |
| E:after | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 | Insert something after the content of each <E> element |
| .class | Yes | Yes | Yes | Yes | Yes | E.g. , .intro means selects all elements with class=”intro” |
| #id | Yes | Yes | Yes | Yes | Yes | E.g., #firstname selects the element with id=”firstname” |
| E F | Yes | Yes | Yes | Yes | Yes | Matches any F element that is a descendant of an E element. |
| E > F | Yes | 7.0 | Yes | Yes | Yes | Matches any F element that is a child of an element E. |
| E + F | Yes | 7.0 | Yes | Yes | Yes | Matches any F element immediately preceded by a sibling element E. |
| E[attr] | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 | Matches any E element with the “attr” attribute set (whatever the value). |
| E[attr=val] | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 | Matches any E element whose “attr” attribute value is exactly equal to “val”. |
| E[attr~=val] | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 | Matches any E element whose “attr” attribute value is a list of space-separated values, one of which is exactly equal to “val” |
| E[attr|=val] | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 | Matches any E element whose “attr” attribute has a hyphen-separated list of values beginning (from the left) with “val”. |
| E:first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 | Matches element E when E is the first child of its parent. |
| E:lang(en) | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 | Selects every <E> element with a lang attribute equal to “en” (English) |
| E::first-letter | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 | Selects the first letter of every <E> element |
| E::first-line | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 | Selects the first line of every <E> element |
CSS 3 Selectors
With all the new shiny CSS 3 selectors available things tend to get tricky. CSS3 is the most recent and currently used. Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in CSS 2, preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 1999. CSS3 has support for almost all recent web browsers.
| Selector | Chrome | Edge | Firefox | Safari | Opera | Description |
| E[attr^=val] | 4.0 | 7.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element whose href attribute value begins with “val” |
| E[attr$=val] | 4.0 | 7.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element whose href attribute value ends with “val” |
| E[attr*=val] | 4.0 | 7.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element whose href attribute value contains the substring “val” |
| E ~ F | 4.0 | 7.0 | 3.5 | 3.2 | 9.6 | Selects every <F> element that is preceded by a <E> element |
| :root | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects the document’s root element |
| E:last-child | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element that is the last child of its parent |
| E:only-child | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element that is the only child of its parent |
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Eg., p:nth-child(2) selects every <p> element that is the second child of its parent |
| :nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | E.g., p:nth-last-child(2) selects every <p> element that is the second child of its parent, counting from the last child |
| E:first-of-type | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element that is the first <E> element of its parent |
| E:last-of-type | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element that is the last <E> element of its parent |
| E:only-of-type | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element that is the only <E> element of its parent |
| :nth-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | E.g., p:nth-of-type(2) selects every <p> element that is the second <p> element of its parent |
| :nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | E.g., p:nth-last-of-type(2) selects every <p> element that is the second <p> element of its parent, counting from the last child |
| E:empty | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every <E> element that has no children (including text nodes) |
| :not() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | E.g., :not(p) selects every element that is not a <p> element |
| E:target | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects the current active E element |
| E:enabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every enabled <E> element |
| E:disabled | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every disabled <E> element |
| E:checked | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 | Selects every checked <E> element |
CSS 4
There is no single, integrated CSS4 specification, because the specification has been split into many separate modules which level independently. There were speculations around CSS4 coming. But it is still not a thing. According to officials, The CSS working group is now working on Selector Level 4. It has new proposed features and selectors.
These new introductions were supposed to come out as CSS4 but It’s not CSS4. It will be level 4 of a single specification.
Source: https://www.w3schools.com and https://en.wikipedia.org
