CSS Cheat Cheet :: Selectors
Here you will find all CSS 2 and CSS 3 selectors that are well supported or in common use. E means any html element (tag) such as p or a.
Element selectors
The basic selectors to select an element in a document.
| Selector | Discription | CSS level | Firefox | IE | Safari | Opera |
|---|---|---|---|---|---|---|
| * | Any element | CSS 2 | 1.0 | 7.0 | 1.0 | 7.0 |
| E | An element of type E where is is a html element like p or a. | 1.0 | 4.0 | 1.0 | 7.0 | |
| E.warning | An E element whose class is "warning", where class can be anything in the class="warning" attribute. | 1.0 | 4.0 | 1.0 | 7.0 | |
| E#myid | An E element with ID equal to "myid", where myid is the value of the id="myid" attribute. | 1.0 | 4.0 | 1.0 | 7.0 |
Relationship selectors
The selectors used to select elements in a document based on their relation ships to other elements.
| Selector | Discription | CSS level | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|---|
| E F | An F element descendant of an E element. | CSS 1 | 1.0 | 4.0 | 1.0 | 7.0 |
| E > F | An F element child of an E element. | CSS 2 | 1.0 | 7.0 | 1.0 | 7.0 |
| E + F | An F element immediately preceded by an E element | 1.0 | 7.0 | 1.0 | 7.0 | |
| E ~ F | An F element preceded by an E element | CSS 3 | 1.0 | 7.0 | 1.0 | 7.0 |
Pseudo-classes
Pseudo-classes apply to elements only under certain conditions. These give find grain control over the document based on its structure.
| Selector | Discription | CSS level | Firefox | IE | Safari | Opera |
|---|---|---|---|---|---|---|
| E:link | An E element being the source anchor of a hyperlink of which the target is not yet visited. | CSS 1 | 1.0 | 3.0 | 1.0 | 7.0 |
| E:visited | An E element being the source anchor of a hyperlink of which the target is already visited. | 1.0 | 3.0 | 1.0 | 7.0 | |
| E:hover | An E element while the mouse is hovered over it. | 1.0 | 4.0 | 1.0 | 7.0 | |
| E:active | An E element that is active, such as a link that is being clicked. | 1.0 | 4.0 | 1.0 | 7.0 | |
| E:focus | An E element that is focued, for example a textbox that has been click or tabbed to. | CSS 2 | 1.0 | no | 1.0 | 7.0 |
| E:target | An E element being the target of the referring URI. That is when the part of the URI after the # matches the elements name or id attributes. | CSS 3 | 1.0 | no | partial | 9.5a |
| E:first-child | An E element, first child of its parent. | CSS 2 | 1.0 | 7.0 | 1.0 | 7.0 |
| E:last-child | An E element, last child of its parent | CSS 3 | 1.0 | no | no | 9.5a |
| E:not(s) | An E element that does not match simple selector s. For example s might be a.internal | 1.0 | no | 1.0 | 9.5a |
Pseudo-elements
Pseudo-elements differ from Pseudo-classes because they treat as elements something that is normally not, for example the first letter. CSS 3 introduced the double colon syntax to help differentiate between the, this is not well supported so not listed here.
| Selector | Discription | CSS level | Firefox | IE | Safari | Opera |
|---|---|---|---|---|---|---|
| E:first-letter | The first formatted letter of an E element | CSS 2 | 1.0 | 5.5 | 1.0 | 7.0 |
| E:first-line | The first formatted line of an E element | 1.0 | 5.5 | 1.0 | 7.0 | |
| E:before | Generated content before an E element | 1.0 | no | 1.0 | 7.0 | |
| E:after | Generated content after an E element | 1.0 | no | 1.0 | 7.0 |
- * - Prior to IE 7.0 this was treated as a single or no element.
- .one.two - only .two class selector was taken into consideration before IE 7.0.
- :hover is applied for all elements only in standards-compliant mode, not quirks mode in IE 7. Prior to 7.0, :hover is for the anchor element only.
- :active is for anchor element only in IE.
- :lang() In Safari only detected when explicitly present on element being tested, attribute not inherited.
