Selectors & Inheritance
| Type | Example | Description | IE6 | IE7 | IE8 |
| Child Selectors | body>p { color: #fff; } |
No | Yes | Yes | |
| Chained Classes | .class1.class2.class3 { background: #fff; } |
<div class=”class1 class2 class3″> <p>Content here.</p> </div> |
No | Yes | Yes |
| Attribute Selectors | a[href] { color: #0f0; } |
No | Yes | Yes | |
| Adjacent Sibling Selectors | h1+p { color: #f00; } |
<h1>heading</h1> <p>Content here.</p> <p>Content here.</p> |
No | Yes | Yes |
| General Sibling Selectors | h1~p { color: #f00; } |
No | Yes | Yes |
Pseudo-Classes and Pseudo-Elements
| Type | Example | IE6 | IE7 | IE8 |
| Descendant Selector After :hover Pseudo-Class | a:hover span { color: #0f0; } |
No | Yes | Yes |
| Chained Pseudo-Classes | a:first-child:hover { color: #0f0; } |
No | Yes | Yes |
| :hover on Non-Anchor Elements | div:hover { color: #f00; } |
No | Yes | Yes |
| :first-child Pseudo-Class | div li:first-child { background: blue; } |
No | Yes | Yes |
| :focus Pseudo-Class | a:focus { border: solid 1px red; } |
No | No | Yes |
| :before and :after Pseudo-Elements | #box:before { content: “This text is before the box”; } #box:after { |
No | No | Yes |
Property Support
| Type | Example | IE6 | IE7 | IE8 |
| Virtual Dimensions Determined by Position | #box { position: absolute; top: 0; right: 100px; left: 0; bottom: 200px; background: blue; } |
No | Yes | Yes |
| Min-Height & Min-Width | #box { min-height: 500px; min-width: 300px; } |
No | Yes | Yes |
| Max-Height & Max-Width | #box { max-height: 500px; max-width: 300px; } |
No | Yes | Yes |
| Transparent Border Color | #box { border: solid 1px transparent; } |
No | Yes | Yes |
| Fixed-Position Elements | #box { position: fixed; } |
No | Yes | Yes |
| Fixed-Position Background Relative to Viewport | #box { background-image: url(images/bg.jpg); background-position: 0 0; background-attachment: fixed; } |
No | Yes | Yes |
| Property Value “inherit” | #box { display: inherit; } |
No | No | Yes |
| Border Spacing on Table Cells | table td { border-spacing: 3px; } |
No | No | Yes |
| Rendering of Empty Cells in Tables | table { empty-cells: show; } |
No | No | Yes |
| Vertical Position of a Table Caption | table { caption-side: bottom; } |
No | No | Yes |
| Clipping Regions | #box { clip: rect(20px, 300px, 200px, 100px) } |
No | No | Yes |
| Orphaned and Widowed Text in Printed Pages | p { orphans: 4; } p { |
No | No | Yes |
| Page Breaks Inside Boxes | #box { page-break-inside: avoid; } |
No | No | Yes |
| Outline Properties | #box { outline: solid 1px red; } |
No | No | Yes |
| Alternative Values for the Display Property | #box { display: inline-block; } |
No | No | Yes |
| Handling of Collapsible Whitespace | p { white-space: pre-line; } div { |
No | No | Yes |
Other Miscellaneous Techniques
| Type | Example | IE6 | IE7 | IE8 |
| Media Types for @import | @import url(“styles.css”) screen; | No | No | Yes |
| Incrementing of Counter Values | h2 { counter-increment: headers; } h2:before { |
No | No | Yes |
| Quote Characters for Generated Content | q { quotes: “‘” “‘”; } q:before { q:after { |
No | No | Yes |
Don’t forget to join our FaceBook Fan page to get latest updates on CSS and IE
