|
1 | 1 | feature: selectors
|
2 | 2 | status: use
|
3 |
| -tags: fallback gtie6 |
| 3 | +tags: fallback |
4 | 4 | kind: css
|
5 | 5 | polyfillurls:
|
| 6 | +moreurl: https://docs.microsoft.com/en-us/previous-versions//cc351024(v=vs.85)#selectors |
6 | 7 |
|
7 |
| -Most CSS Selectors are supported from IE7 onwards, so you should be safe to use them. But do note that, on browsers that do not support these selectors, a whole rule will be detected as invalid if these unsupported selectors are present. For example, in IE6 `#main, p:first-child {}` would be invalid because it is unable to understand `p:first-child`. We strongly recommend you do not try to polyfill this, but if you do need one, you can use [Selectivizr](http://selectivizr.com/). |
8 |
| - |
9 |
| -#### When you sunset IE6 support, you can use: |
10 |
| - |
11 |
| -* `tr > td` : Immediate descendant (child) selector. |
12 |
| -* `dt + dd` : next sibling selector* |
13 |
| -* `dt ~ dd` : any following sibling |
14 |
| -* `div[attr]` and `img[src$=png]` : Attribute selector (starts with, ends with, contains). |
15 |
| -* `p:first-child`* |
16 |
| -* `div:hover` and `:hover` state on all non-`<a>`'s |
17 |
| -* `li.food.vegetable` : without worrying about the [chained classes bug](https://paulirish.com/2008/the-two-css-selector-bugs-in-ie6/) |
18 |
| - |
19 |
| -\* IE7-8 don't update styles properly when elements are manipulated with JS. Usually you have to force the browser to redraw (e.g. hide and show parent element). |
20 |
| - |
21 |
| -#### When you sunset IE7 support, you can use: |
22 |
| - |
23 |
| -* ` :before, :after` and generated content |
24 |
| -* `:focus` for elements with current focus |
25 |
| -* <a href="https://www.w3.org/TR/selectors/#lang-pseudo">`:lang(C)`</a> which targets an element based on language |
| 8 | +Most CSS Selectors are supported from IE8 onwards, so you should be safe to use them. But do note that, on browsers that do not support these selectors, a whole rule will be detected as invalid if these unsupported selectors are present. For example, in IE6 `#main, p:first-child {}` would be invalid because it is unable to understand `p:first-child`. We strongly recommend you do not try to polyfill this, but if you do need one, you could use [Selectivizr](http://selectivizr.com/). |
26 | 9 |
|
27 | 10 | #### When you sunset IE8 support, you can use:
|
28 | 11 |
|
29 | 12 | * These very useful selectors: <a href="https://css-tricks.com/how-nth-child-works/">`:nth-child(n)`</a>, `:last-child`, `:target`, `:not(s)`, `:enabled`, `:disabled`, `:checked`, `::selection`
|
30 | 13 | * These ones, too: `:root`, `:nth-last-child(n)`, `:nth-of-type(n)`, `:nth-last-of-type(n)`, `:first-of-type`, `:last-of-type`, `:only-child`, `:only-of-type`, `:empty`
|
31 | 14 |
|
32 | 15 | <!--
|
33 |
| -
|
34 |
| -Resources: |
35 |
| -
|
36 |
| -* https://www.smashingmagazine.com/2009/10/css-differences-in-internet-explorer-6-7-and-8/ |
37 |
| -* http://www.bennadel.com/blog/2306-What-CSS-Properties-Are-Supported-When-You-Drop-IE6-Support.htm |
38 |
| -* http://analogysoft.com/learning/ui-hulk-out/#beyondie6 |
39 |
| -* http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#selectors |
40 |
| -* http://www.quirksmode.org/css/contents.html |
41 |
| -* http://www.impressivewebs.com/browser-support-css3-selectors/ |
42 |
| -
|
43 | 16 | [].forEach.call( document.querySelectorAll('td'), function(elem){
|
44 | 17 | if (elem.innerText.trim() == 'No') elem.style.backgroundColor = 'red';
|
45 | 18 | if (elem.innerText.trim() == 'Yes') elem.style.backgroundColor = 'green';
|
46 | 19 | });
|
47 |
| -
|
48 | 20 | -->
|
0 commit comments