Quantcast
Channel: quirm.net » css
Viewing all articles
Browse latest Browse all 5

CSS Selectors

$
0
0

In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns are called selectors and may range from simple element names to complex patterns. If all conditions in the pattern are true for a certain element, the selector matches the element and the appropriate style will be applied when the element is rendered in a CSS-capable browser.

Summary of CSS2 Selector Syntax
Pattern Meaning Selector Type
* Matches any element. Universal selector
E Matches any E element (eg h2,span) Type selector
E F Matches any F element that is a descendant of an E element Descendant selector
E > F Matches any F element that is a child of an element E Child selector
E + F Matches any F element immediately preceded by an element E Adjacent selector
E[foo] Matches any E element with the “foo” attribute set (whatever the value) Attribute selector
E[foo=”warning”] Matches any E element whose “foo” attribute value is exactly equal to “warning” Attribute selector
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 selector
E[lang|=”en”] Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. Attribute selector
DIV.warning The same as DIV[class~=”warning”] Class selector
E#myid Matches any E element ID equal to “myid”. ID selector
E:first-child [1] Matches element E when E is the first child of its parent Pseudo-class
:first-line [1] Applies style to the first formatted line of a paragraph Pseudo-class
:first-letter [1] May be used for “initial caps” and “drop caps”, which are common typographical effects Pseudo-class
E:active
E:hover
E:focus
Matches E during certain user actions Dynamic pseudo-class
:before [2]
:after [2]
Can be used to insert generated content before or after an element’s content Dynamic 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)
Link pseudo-class
E:lang(c) Matches element of type E if it is in (human) language ‘c’ (the document language specifies how language is determined) :lang() pseudo-class
  1. Not currently supported by most browsers.
  2. Not supported by Internet Explorer 6.

Viewing all articles
Browse latest Browse all 5

Trending Articles