Tutorial 8: Some Selectors for css + jquery

X + Y

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

It will select only the element that is immediately preceded by the former element.

X > Y

1. div#container > ul {  
2.   border: 1px solid black;  
3. } 

will only select direct children.

X ~ Y

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

Any child with given tag

X[href="foo"]

1. a[href="http://net.tutsplus.com"] {  
2.   color: #1f6053; /* nettuts green */  
3. }
4.  a[href^="http"] {  //start with http
5. a[href$=".jpg"] {   //end with jpg

X:checked

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

target a user interface element that has been checked - like a radio button, or checkbox.

X:not(selector)

 

1. div:not(#container) {  
2.    color: blue;  
3. } 

select all divs, except for the one which has an id of container.

p::first-letter {
p::first-line {
li:nth-child(3) {
li:nth-last-child(2) {
ul li:first-child {
ul > li:last-child {

X:only-of-type

1. li:only-of-type {  
2.    font-weight: bold;  
3. } 

will target elements that do not have any siblings within its parent container.

 

       

 Sources:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
http://net.tutsplus.com
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/