All About Java

All About CSS Selectors

All About CSS Selectors

CSS Selectors are grouped into

  • Universal Selectors
  • Type Selectors
  • Descendant Selectors
  • Child Selectors
  • Direct Sibling Selectors
  • Indirect Sibling Selectors
  • Attribute Selectors
  • Class Selectors
  • ID Selectors
  • Link Selectors
  • Language Selectors
  • Contains Selectors
  • Root Selectors
  • Empty Selectors
  • Negated Selectors
  • Child Selectors
  • Typed Child Selectors
  • Nth Child Selectors
  • Nth Last Child Selectors
  • Nth of Type Selectors
  • Nth Last of Type Selectors
  • Pseudo-element Selectors

Universal Selectors

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

Type Selectors

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 Selectors

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

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 Selectors

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

Indirect Sibling Selectors

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

Attribute Selectors

*[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 Selectors

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

ID Selectors

p#intro p elements with an id attribute of intro

Link Selectors

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

Language Selectors

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

Contains Selectors

p:contains(“synergy”) paragraphs containing the text “synergy”

Root Selectors

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

Empty Selectors

div:empty every empty div element

Negated Selectors

*: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

Child Selectors

div > :first-child the first child of a div element
div > :last-child the last child of a div element
div > :o nly-child the only child of a div element

Typed Child Selectors

div > p:first-of-type the first p element child of a div element
div > p:last-of-type the last p element child of a div element
div > p:only-of-type the only p element child of a div element

Nth Child Selectors

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 Selectors

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 Selectors

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 Selectors

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-element Selectors

p::before the beginning of every p element
p::after the end of every p element
ol > li::marker markers in ordered list items
p::first-letter the first letter of p elements
p::first-line the first line of p elements
::footnote-call footnote calls, the anchors that refer to footnotes
::footnote-marker footnote markers, placed in front of the actual footnote text

Comments are currently closed.