/

HTML / CSS / JavaScript Tutorial

CSS Selectors

[this page | pdf | back links]

Commonly CSS is applied to all elements of a specific type. By using selectors, we can, however, apply CSS to a wide range of sub-types, selected in a wide variety of ways. Some selectors (e.g. the :hover selector) depend on mouse position or activity. The following are valid selector types:

 

Selector

Description*

Example

*

Selects all elements

*

#id

Selects the element with a given id attribute (e.g. id="yyy")

#yyy

Element

Selects all elements of type element

p

element.class

Selects all elements of type element with a given class attribute (e.g. class="xxx")

p.xxx

element1, element2

Selects all elements of either type element1 or type element2

p, a

element1 element2

Selects all elements of type element2 that are inside an element of type element1

p a

element1>element2

Selects all elements of type element2 that have as their parent an element of type element1

p>a

element1+element2

Selects all elements of type element2 that are immediately after elements of type element1

p+a

element1~element2

Selects all elements of type element2 that are preceded by an element of type element1

p+a

element[attribute]

Selects all elements of type element with a specific attribute*

p[target]

element[attribute = value]

Selects all elements of type element that have a specific attribute taking a specific value

p[target = "_blank"]

element[attribute ~= word]

Selects all elements of type element that have a specific attribute containing a specific word

p[title ~= "answer"]

element[attribute |= word]

Selects all elements of type element that have a specific attribute starting with a specific word. The word needs to be either alone, like lang=en, or followed by a hyphen(-), like lang=en-us.

p[title |= "answer"]

element[attribute ^= value]

Selects all elements of type element that have a specific attribute starting with a specific value

a[href ^= "https"]

element[attribute $= value]

Selects all elements of type element that have a specific attribute ending with a specific value

a[href $= ".pdf"]

element[attribute *= value]

Selects all elements of type element that have a specific attribute containing a specific sub-string

a[href *= "Nematrian"]

element:active

Selects whatever element of type element is currently active

a:active

element:checked

Selects all elements of type element that are checked

input:checked

element:disabled

Selects all elements of type element that are disabled

input:disabled

element:empty

Selects all elements of type element that are empty

div:empty

element:enabled

Selects all elements of type element that are enabled

input:enabled

element:first-child

Selects all elements of type element that are the first children of their parent

p:first-child

element:first-of-type

Selects all elements of type element that are the first of that type of element within their parent

p:first-of-type

element:focus

Selects all elements of type element that has focus**

input:focus

element:hover

Selects all elements of type element that are currently being hovered over (i.e. where mouse is positioned over it)

a:hover

element:in-range

Selects all elements of type element whose value is within any range specified by the element

input:in-range

element:invalid

Selects all elements of type element with an invalid value

input:invalid

element:lang(language)

Selects all elements of type element with a lang value equal to language

p:lang(it)

element:last-child

Selects all elements of type element that are the last children of their parent

p:last-child

element:last-of-type

Selects all elements of type element that are the last of that type of element within their parent

p:last-of-type

element:link

Selects all elements of type element that are unvisited

a:link

:not(selector)

Selects all elements that are not the given selector

:not(p)

element:nth-child(n)

Selects all elements of type element that are the n’th child of their parent

a:nth-child(2)

element:nth-last-child(n)

Selects all elements of type element that are the n’th last child (i.e. counting backwards from the last one) of their parent

a:nth-last-child(2)

element:nth-last-of-type(n)

Selects all elements of type element that are the n’th last of their type (i.e. counting backwards from last one) of their parent

a:nth-last-of-type(2)

element:nth-of-type(n)

Selects all elements of type element that are the n’th of their type of their parent

a:nth-of-type(2)

element:only-child

Selects all elements of type element that are the only child of their parent

a:only-child

element:only-of-type

Selects all elements of type element that are the only one of their type of their parent

a:only-of-type

element:optional

Selects all elements of type element that do not have a required attribute specified

input:optional

element:out-of-range

Selects all elements of type element whose value is outside any range specified by the element

input:out-of-range

element:read-only

Selects all elements of type element which have the readonly attribute specified

input:read-only

element:read-write

Selects all elements of type element which do not have the readwrite attribute specified

input:read-write

element:required

Selects all elements of type element that have a required attribute specified

input:required

:root

Selects the document's root element

:root

element:target

Selects the current active target element. A URL with an # followed by an anchor links to a specific element within a document. The element being linked to is the target element.

#para1:target

element:valid

Selects all elements of type element that have a valid value

input:valid

element:visited

Selects all visited elements

a:visited

 

* If element is left out of the selector then the selector applies to all element types

** The element that has focus is the one that if you hit return will be assumed to be the element into which input has just been placed.

 

A handful of selectors don’t apply to elements but to components of elements:

 

Selector

Description*

Example

element::after

Inserts material immediately after the content of the elements of type element

h1::after

element::before

Inserts material immediately before the content of the elements of type element

h1::before

element::first-letter

Selects first letter of elements of type element

p::first-letter

element::first-line

Selects first line of elements of type element

p::first-line

element:: selection

Selects the portion of elements of type element that are selected by the user

::selection

 


NAVIGATION LINKS
Contents | Prev | Next | CSS Properties


Desktop view | Switch to Mobile