RSS

Tag Archives: CSS Selectors

CSS Selector’s Essentials

Pattern Meaning Selector type
* Matches any element Universal selector
E Matches any E element (i.e., any element of type E) Type selectors
E F Matches any F element that is a descendant of an E element Descendant selectors
E > F Matches any F element that is a child of an element E Child selectors
E:first-child Matches element E when it is the first child of its parent The :first-child pseudo-class
E:link
E:visited
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
E:active Matches E during certain user actions. The dynamic pseudo-classes
E:hover Matches E during certain user actions. The dynamic pseudo-classes
E:focus Matches E during certain user actions. The dynamic pseudo-classes
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-classes
E + F Matches any F element immediately preceded by an element E. Adjacent selectors
E[foo] Matches any E element with the “foo” attribute set (whatever the value). Attribute selectors
E[foo="warning"] Matches any E element whose “foo” attribute value is exactly equal to “warning”. Attribute selectors
E[foo~="warning"] Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”. Attribute selectors
E[xml:lang|="en"] Matches any E element whose “xml:lang” attribute value has a hyphen-separated list of values beginning (from the left) with “en”. Attribute selectors
E:first-line Matches the first formatted line of an E element. The :first-line pseudo-element
E:first-letter Matches the first formatted letter of an E element. The :first-letter pseudo-element
E:before Matches/creates generated content before an E element. The :before pseudo-element
E:after Matches/creates generated content after an E element. The :after pseudo-element
E.classid The same as E[class~=classid] Class selectors
E#myid Matches any E element id equal to “myid”. ID selectors
@page :first Specifies style for the first page of a document Page pseudo-classes
@page :left Specifies style for the left pages of a document Page pseudo-classes
@page :right Specifies style for the right pages of a document Page pseudo-classes

 
2 Comments

Posted by on July 18, 2010 in CSS

 

Tags:

 
Follow

Get every new post delivered to your Inbox.