Did you find this useful?
Socialize it today.


CSS Selectors Reference

Friday, November 30, 2012

CSS uses selectors to find elements in the document tree. Selectors are simply patterns used to select the elements you want to style. A Selector represents a structure. This structure can be used as a condition that determines which elements a selector matches in the document tree.


SelectorDescriptionCSS
*universal element, any element2
Ean element of type E1
E FSelects an F element descendant of an E element1
E, Fselects an E and F element1
E > FSelects an F element child of an E element2
E + FSelects an F element immediately preceded by an E element2
E ~ FSelects an F element preceded by an E element3
[foo]Selets element with a "foo" attribute2
[foo="bar"]Selects element whose "foo" attribute value is exactly equal to "bar"2
[foo~="bar"]Selects element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"2
[foo^="bar"]Selects element whose "foo" attribute value begins exactly with the string "bar"3
[foo$="bar"]Selects element whose "foo" attribute value ends exactly with the string "bar"3
[foo*="bar"]Selects element whose "foo" attribute value contains the substring "bar"3
[foo|="en"]Selects element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"2
:rootSelects root of the document3
:nth-child(n)Selects a user interface element which is enabled or disabled element, the n-th child of its parent3
:nth-last-child(n)Selects a user interface element which is enabled or disabledelement, the n-th child of its parent, counting from the last one3
:nth-of-type(n)Selects a user interface element which is enabled or disabled element, the n-th sibling of its type3
:nth-last-of-type(n)Selects a user interface element which is enabled or disabled element, the n-th sibling of its type, counting from the last one3
:first-childSelects a user interface element which is enabled or disabled element, first child of its parent2
:last-childSelects a user interface element which is enabled or disabledelement, last child of its parent3
:first-of-typeSelects a user interface element which is enabled or disabled element, first sibling of its type3
:last-of-typeSelects a user interface element which is enabled or disabled element, last sibling of its type3
:only-childSelects a user interface element which is enabled or disabled element, only child of its parent3
:only-of-typeSelects a user interface element which is enabled or disabled element, only sibling of its type3
:emptySelects a user interface element which is enabled or disabledelement that has no children 3
:linkSelects unvisited links1
:visitedSelects visited links1
:activeSelects active links1
:hoverSelects on mouseover1
:focusSelects element which has focus2
:targetSelects element being the target of the referring URI3
:lang(en)Selectselement in language "en" 2
:enabledSelects a user interface element which is enabled3
:disabledSelects a user interface element which is disabled3
:checkedSelects a user interface element which is checked3
:first-lineSelects the first formatted line of an element1
:first-letterSelects the first formatted letter of an element1
:beforeSelects generated content before an element2
:afterSelects generated content after an element2
.myclassSelects element whose class is "myclass"1
#myidSelects element with ID equal to "myid"1
:not(s)Selects element that does not match simple selector s3
::selectionSelects the portion of an element that is selected by a user3


In CSS1 and CSS2, pseudo-elements start with a colon (:), just like pseudo-classes. In CSS3, pseudo-elements start with a double colon (::), which differentiates them from pseudo-classes.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Sergeys HTML5 CSS3 HTML CSS and JavaScript Responsive Web Design with HTML5 and CSS3