Summery of CSS Selectors

The following table summarizes CSS 2.1 selector syntax:

Pattern Meaning Selector type
X Matches an element of type X in the web page. Type selectors
X Y Matches any Y element that is a descendant of an X element. Descendant selectors
X > Y Matches any Y element that is a direct child of an element X. Child selectors
X.className Matches any X element with class attribute equal to "className". (In HTML, the same as X[class~="className"].) Class selectors
X#myid Matches any X element with id attribute equal to "myid". ID selectors
X:link
X:visited
Matches element X if X is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
X:active
X:hover
X:focus
Matches X during certain user actions as activated element(:active), mouse over element (:hover) and focus on element (:focus). The dynamic pseudo-classes
X:first-child Matches element X when X is the first child of its parent. The :first-child pseudo-class
X:lang(c) Matches element of type X if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class
X:first-line Matches the first line of text in the element X. The :first-line pseudo-elements
X:first-letter Matches the first letter of text in the element X. The :first-letter pseudo-elements
X:before
X:after
Insert generated content before and after an X element's content The :before & :after pseudo-elements
* Matches any element in the web page . Universal selector
X + Y Matches any Y element immediately preceded by a sibling element X. Adjacent selectors
X[title] Matches any X element with the "title" attribute set (the value of title can be whatever text). Attribute selectors
X[title="warning"] Matches any X element whose "title" attribute value is exactly equal to "warning". Attribute selectors
X[title~="warning"] Matches any X element whose "title" attribute value is a list of space-separated values, one of which is exactly equal to "warning". Attribute selectors
X[lang|="en"]Matches any X element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". Attribute selectors
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.