CSS Selectors

A selector is a pattern that matches a set of elements in an HTML or XML document.

The following table summarizes the CSS Selector syntax:

Pattern	Type	Matches
*	U	any element
E	T	an element of type E
E[foo]	A	an E element with a "foo" attribute
E[foo="bar"]	A	an E element whose "foo" attribute value is exactly equal to "bar"
E[foo~="bar"]	A	an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
E[foo\|="en"]	A	an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
E:first-child	P	an E element, first child of its parent
E:link E:visited	P	an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
E:active E:hover E:focus	P	an E element during certain user actions
E:lang(fr)	P	an element of type E in language "fr" (the document language specifies how language is determined)
E::first-line	P	the first formatted line of an E element
E::first-letter	P	the first formatted letter of an E element
E::before	P	generated content before an E element
E::after	P	generated content after an E element
E.warning	L	an E element whose class is "warning" (the document language specifies how class is determined).
E#myid	I	an E element with ID equal to "myid".
E F	D	an F element descendant of an E element
E>F	C	an F element child of an E element
E + F	S	an F element immediately preceded by an E element

Type Legend:
A - Attribute
C - Child
I - ID
L - Class
D - Descendant
P - Pseudo-class/element
S - Adjacent Sibling
T - Type
U - Universal

Description

The # selector selects an element with a unique id. The id refers to the id attribute of a HTML element.

Tip: The same id value should never be used more than once in a document.

v1.0

This selector has the form:

$("#id")

Parameter	Description
id	(required) Specifies the id of the element to select

The . selector selects elements with a specific class.

v1.0

This selector has the form:

$(".class")

Parameter	Description
class	(required) Specifies the class of the elements to select. An element can have multiple classes; only one of them must match.

Select elements with class "intro":

$(".intro")

The * selector selects every single element in the document, including html, head and body.

If used together with another element (nested selectors), it selects all child elements within the specified element.

v1.0

This selector has the form:

$("*")

Tip: Depending on use, the * selector can be slow for some browsers to process.