Basic CSS Selectors

Basic CSS Selectors Supported by jQuery

Selector Example Description
Universal Selector * Match any element
Element Selector div Match all element with tag name "div"
Selector Grouping div, h1, ul Match all element with tag name "div", "h1", and "ul"
Descendant Selector div p Match all elements with tage name "i" that are descendant of "ul"
Direct Child Selector header>h1 Match all elements with a tag name of "h1" that are direct child of "header"
Adjacent Sibling Selector h1+p Match all elements with a tag name "p" that are immediately preceded by sibling "h1"
General Sibling Selector h1~p Match all elements with a tag name "p" that are preceded by sibling "h1"
Class Selector p.red Match all elements with a tag name "p" with a class name "red"
ID Selector p#yellow Match all elements with a tag name "p" with a ID equal to "yellow"
Attribute Selector p[title] Match all elements with a tag name "p" that have attribute "title" of any value
Attribute Selector p[title="main"] Match all elements with a tag name "p" that have attribute "title" whose value is exactly "main"

Dynamic Pseudo-classes

Selector Example Description
:link a:link Pseudo-class applies for links that have not yet been visited
:hover a:hover The pointer is over the element
:visited a:visited The value of href is in history
:active a:active The element is clicked
:focus input:focus The element has screen focus

Pseudo-classes/Position Filters Supported by jQuery

Selector Example Description
:first-child li:first-child Matches the first descendant within the context
:last-child li:last-child Matches the last descendant within the context
:nth-child(n) li:nth-child(4) Matches the 4th child element descendant within the context
:first-of-type p:first-of-type Matches the first descendant "p" element
:last-of-type p:last-of-type Matches the last descendant "p" element
:nth-of-type(n) p:nth-of-type(2) Matches the 2nd "p" element
:nth-child(even) li:nth-child(even) Match all even elements within the context
:nth-child(odd) li:nth-child(odd) Match all odd elements within the context

Pseudo-elements/Position Filters Supported by jQuery

Selector Example Description
:first-letter p:first-letter Matches the first letter within the context
:first-line p:first-line Matches the last line of text within the context
:before li:before { content : "-"; /*or use for image - content: url(image.jpg); */ } Add additinal content before the element
:after q:after{ content : close-quote; } Add additinal content after the element