Thursday 4 August 2011

CSS Selectors


CSS Selectors

Below are examples of all of the CSS selectors For their precise definition please refer to the CSS specifications.

Universal

*elements in the default namespace
|*elements in no namespace
ns|*elements in the namespace with prefix ns
*|*elements in any or no namespace

Type

divdiv elements in the default namespace
|divdiv elements in no namespace
ns|divdiv elements in the namespace with prefix ns
*|divdiv elements in any namespace or in none

Descendant

div pp elements that are within a div element
* pp elements that are within any element (ie. not the root element)

Child

div > pp elements that are the direct children of div elements
p > *any elements that are the direct children of p elements

Direct Sibling

div + pp elements that directly follow div elements
p + *any elements that directly follow p elements

Indirect Sibling

div ~ pp elements anywhere after div elements
p ~ *any elements anywhere after p elements

Attribute

*[href]elements with an href attribute
*[align="right"]elements with an align attribute of right
*[href^="http:"]elements with an href attribute beginning with http:
*[href$=foo]elements with an href attribute ending with foo
*[href*=foo]elements with an href attribute containing foo
*[words~=foo]elements with a words attribute containing the word foo
*[lang|=en]elements with a lang attribute equal to or beginning with en

Class

p.introp elements with a class attribute containing the word intro

ID

p#introp elements with an id attribute of intro

Link

:linkelements that represent links
a[href^="mailto:"]:linkelements that link to an email address

Lang

:lang(en)elements whose specified language is English
q:lang(fr-CA)quotes whose specified language is French (Canadian)

Contains

p:contains("synergy")paragraphs containing the text "synergy"

Root

:rootthe root element of the document
html:roothtml root elements
:root > *children of the root element

Empty

div:emptyevery empty div element

Not

*:not(p)every element except p elements
div:not(:empty)every non-empty div element
a:not([href])every a element without a href attribute

First Child

div > :first-childthe first child of a div element

Last Child

div > :last-childthe last child of a div element

Only Child

div > :only-childthe only child of a div element

First of Type

div > p:first-of-typethe first p element child of a div element

Last of Type

div > p:last-of-typethe last p element child of a div element

Only of Type

div > p:only-of-typethe only p element child of a div element

Nth Child

div > :nth-child(3)the third child of a div element
div > :nth-child(even)every even child of a div element
div > :nth-child(odd)every odd child of a div element
div > :nth-child(3n)every third child of a div element

Nth Last Child

div > :nth-last-child(3)the third last child of a div element
div > :nth-last-child(even)every even last child of a div element
div > :nth-last-child(odd)every odd last child of a div element
div > :nth-last-child(3n)every third last child of a div element

Nth of Type

div > p:nth-of-type(3)the third p element child of a div element
div > p:nth-of-type(even)every even p element child of a div element
div > p:nth-of-type(odd)every odd p element child of a div element
div > p:nth-of-type(3n)every third p element child of a div element

Nth Last of Type

div > p:nth-last-of-type(3)the third last p element child of a div element
div > p:nth-last-of-type(even)every even last p element child of a div element
div > p:nth-last-of-type(odd)every odd last p element child of a div element
div > p:nth-last-of-type(3n)every third last p element child of a div element

Pseudo-elements

::beforeThis pseudo-element can be used with the content property to add generated content not present in the original document. For example, p::before can be used to insert text at the beginning of every paragraph element.
::afterThis pseudo-element can be used with the content property to add generated content not present in the original document. For example, p::after can be used to insert text at the end of every paragraph element.
::markerThis pseudo-element is for applying style to list item markers.
::first-letterThis pseudo-element is for applying style to the first letter of an element.
::footnote-callThis pseudo-element is for applying style to footnote calls, the numeric anchors in the main text that refer to footnotes.
::footnote-markerThis pseudo-element is for applying style to footnote markers, the numeric markers placed in front of the footnote text.
reference from  

No comments:

Post a Comment