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
div | div elements in the default namespace |
|div | div elements in no namespace |
ns|div | div elements in the namespace with prefix ns |
*|div | div elements in any namespace or in none |
Descendant
div p | p elements that are within a div element |
* p | p elements that are within any element (ie. not the root element) |
Child
div > p | p elements that are the direct children of div elements |
p > * | any elements that are the direct children of p elements |
Direct Sibling
div + p | p elements that directly follow div elements |
p + * | any elements that directly follow p elements |
Indirect Sibling
div ~ p | p 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.intro | p elements with a class attribute containing the word intro |
ID
p#intro | p elements with an id attribute of intro |
Link
:link | elements that represent links |
a[href^="mailto:"]:link | elements 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
:root | the root element of the document |
html:root | html root elements |
:root > * | children of the root element |
Empty
div:empty | every 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-child | the first child of a div element |
Last Child
div > :last-child | the last child of a div element |
Only Child
div > :only-child | the only child of a div element |
First of Type
div > p:first-of-type | the first p element child of a div element |
Last of Type
div > p:last-of-type | the last p element child of a div element |
Only of Type
div > p:only-of-type | the 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
::before | This 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. |
::after | This 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. |
::marker | This pseudo-element is for applying style to list item markers. |
::first-letter | This pseudo-element is for applying style to the first letter of an element. |
::footnote-call | This pseudo-element is for applying style to footnote calls, the numeric anchors in the main text that refer to footnotes. |
::footnote-marker | This 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