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.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

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