sebastiano-guerriero
10/11/2013 - 12:42 PM

A list of css selectors

A list of css selectors

* {

}

#container * {

}

a:visited {

}

ul + p {
	/*only the first paragraph after each ul - p is not a children of ul*/
}

nav > ul {
	/*only direct children*/
}

ul ~ p {
	/*all paragraphs that follow a ul - similar to + */
}

input[type=radio]:checked {

}

div:not(#container) {
	/*selects all divs except the container one*/
}

p::first-line {

}

p::first-letter {

}

li:nth-child(3) {

}

li:nth-last-child(2) {

}

li:nth-child(3n+3) {
	/*start by adding 0 to n - in this case is 3rd, 6th, 9th...*/
}

p:nth-of-type(2) {
  /* select the second paragraph child of a parent - consider only paragraphs! */
}

p:first-of-type {
  /* select the first paragraph child of a parent */
}

li:nth-last-child(2) {
    color: green; /* select the Second to Last Element */
}

p::selection { /*Overriding The Default Text Selection Color With CSS*/
  background: #333;
}

[class*=" icon-"] {
  /* All classes that have " icon-" inside the attribute - in any place */
}

[class^="icon-"] {
  /* All classes that start with "icon-" */
}

a[href$=".jpg"] {  
   color: red; /* all anchor tags that end with .jpg */  
}  

a[data-info~="external"] {  
   color: red;  /* targets an attribute with a spaced-separated list of values */ 
}