The 30 CSS Selectors

For a list of CSS selectors browser support, please see here:
http://quirksmode.org/css/contents.html

The 30 CSS selectors:
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

1) *

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2) #X

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3) .X

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4) X Y

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5) X

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6) X:visited and X:link

1. a:link { color: red; }  
2. a:visted { color: purple; }   

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7) X + Y

1. ul + p {  
2.    color: red;  
3. }   

Selecting the first sibling element Y immediately preceded by X.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8) X > Y

This selector selects the direct children only.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9) X ~ Y

Similar to X Y.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10) X[attr]

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11) X[attr="val"]

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12) X[attr*="val"]

1. a[href*="tuts"] {  
2.   color: #1f6053; /* nettuts green */  
3. }  

Selecting anchor(s) with the attribute "class" contains the value "bar".

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13) X[attr^="val"]

1. a[href^="http"] {  
2.    background: url(path/to/external/icon.png) no-repeat;  
3.    padding-left: 10px;  
4. }  

Selects all anchor tags with "href" that begins with "http". This does not account for url with "https"

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14) X[attr$="val"]

1. a[href$=".jpg"] {  
2.    color: red;  
3. } 

Selects all "href" that are link to a jpg file.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15) X[data-*="val"]

1. a[data-filetype="image"] {  
2.    color: red;  
3. }  

1. <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  

Since an image file type can end with jpg, png, gif...etc, so rather than selecting different file types, we can use the attribute "data-filetype='image'" to select all image files.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16) X[attr~="val"]

1. <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

1. /* Target data-info attr that contains the value "external" */  
2. a[data-info~="external"] {  
3.    color: red;  
4. }  
5.   
6. /* And which contain the value "image" */  
7. a[data-info~="image"] {  
8.   border: 1px solid black;  
9. }  

Targets anchors with "data-info" with space separated list.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17) X:checked

1. input[type=radio]:checked {  
2.    border: 1px solid black;  
3. }  

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18) X:after

Compatibility

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19) X:hover

Compatibility

• IE6+ (In IE6, :hover must be applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

20) X:not(selector)

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

21) X::pseudoElement

1. p::first-line {  
2.    font-weight: bold;  
3.    font-size: 1.2em;  
4. }   

Selects the first line of a paragraph

1. p::first-letter {  
2.    float: left;  
3.    font-size: 2em;  
4.    font-weight: bold;  
5.    font-family: cursive;  
6.    padding-right: 2px;  
7. } 

Selects the first letter in a paragraph like a newspaper article

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22) X:nth-child(n)

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari

23) X:nth-last-child(n)

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

24) X:nth-of-type(n)

1. ul:nth-of-type(3) {  
2.    border: 1px solid black;  
3. } 

Selects the 3rd div in the page.

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari

25) X:nth-last-of-type(n)

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26) X:first-child

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27) X:last-child

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

IE8 supports :first-child but not :last-child...

28) X:only-child

1. <div><p> My paragraph here. </p></div>  
2.   
3. <div>  
4.    <p> Two paragraphs total. </p>  
5.    <p> Two paragraphs total. </p>  
6. </div> 

1. div p:only-child {  
2.    color: red;  
3. }  

Only targets the 1st div as its only got one child element p.

Compatibility

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29) X:only-of-type

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30) X:first-of-type

Compatibility

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera