CSS3 Selectors Reference

« Previous Chapter Next Reference »

Selectors are patterns used to select which element(s) you want to style.

The CSS3 specification contains several new selectors, and many of them have already been implemented in modern browsers.

The Below table lists the new CSS3 selectors:

Pattern Example Example description CSS
element1~element2 p~ul Selects every ul element that are preceded by a p element 3
[attribute^=value] a[src^="https"] Selects every a element whose src attribute value begins with "https" 3
[attribute$=value] a[src$=".pdf"] Selects every a element whose src attribute value ends with ".pdf" 3
[attribute*=value] a[src*="QcTutorials"] Selects every a element whose src attribute value contains the substring "QcTutorials" 3
:first-of-type p:first-of-type Selects every p element that is the first p element of its parent 3
:last-of-type p:last-of-type Selects every p element that is the last p element of its parent 3
:only-of-type p:only-of-type Selects every p element that is the only p element of its parent 3
:only-child p:only-child Selects every p element that is the only child of its parent 3
:nth-child(n) p:nth-child(2) Selects every p element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects every p element that is the second child of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects every p element that is the second p element of its parent 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every p element that is the second p element of its parent, counting from the last child 3
:last-child p:last-child Selects every p element that is the last child of its parent 3
:root :root Selects the document´┐Żs root element 3
:empty p:empty Selects every p element that has no children (including text nodes) 3
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
:enabled input:enabled Selects every enabled input element 3
:disabled input:disabled Selects every disabled input element 3
:checked input:checked Selects every checked input element 3
:not(selector) :not(p) Selects every element that is not a p element 3
::selection ::selection Selects the portion of an element that is selected by a user 3

« Previous Chapter Next Reference »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!