CSS Selector








CSS selectors are used to pick up HTML element and then we can add styles.

A CSS selector is the part of a CSS rule set.

Basic Selector

The following table lists the basic CSS selectors.

Selector Example Example description CSS
.class .footer Selects all elements with class="footer" 1
#id #footer Selects the element with id="footer" 1
* * Selects all elements 2
element div Selects all <div> elements 1




Combinator Selector

The following table lists the Combinator CSS selectors.

We can use the combinator selector we can do the selection based on the relations.

Selector Example Example description CSS
ele,ele div, h1 Selects all <div> and all <h1> 1
ele ele div h1 Selects all <h1> inside <div> 1
ele > ele div > h1 Selects all <h1> whose the parent is a <div> 2
ele+ele div + h1 Selects all <h1> placed immediately after <div> elements 2
ele~ele p ~ div Selects <div> preceded by a <p> element 3

Attribute Selector

The following table has the attribute selectors. We can use attribute selectors to select HTML elements by attribute value.

Selector Example Example description CSS
[attr] [href] Selects all elements with a href attribute 2
[attr=value] [title=message] Selects all elements with title="message" 2
[attr~=value] [title~=tooltip] Selects all elements with title attribute which has word "tooltip" 2
[attr|=value] [lang|=en] Selects all elements with lang attribute whose value is "en" 2
[attr^=value] a[href^="http"] Selects <a> element whose href attribute begins with "http" 3
[attr$=value] a[href$=".htm"] Selects <a> element whose href attribute ends with ".htm" 3
[attr*=value] a[href*="htm"] Selects <a> element whose href attribute contains the substring "htm" 3




Pseudo-elements and pseudo-classes

A pseudo-class uses colon character(s) to identify a pseudo-state that an element might have. For example, we can select active state for anchor links.

Selector Example Example description CSS
:active a:active Select the active links 1
::after div::after Insert content after every <div> element 2
::before div::before Insert content before the content of every <div> element 2
:checked input:checked Selects checked <input> element 3
:disabled input:disabled Selects disabled <input> element 3
:empty div:empty Selects <div> element withno children (including text nodes) 3
:enabled input:enabled Selects enabled <input> element 3
:first-child div:first-child Selects every <div> element that is the first child 2
::first-letter p::first-letter Selects the first letter of <p> element 1
::first-line p::first-line Selects the first line of <p> element 1
:first-of-type p:first-of-type Select the first occurence of a <p> element within its container. 3
:focus input:focus Selects the input element with focus 2
:hover a:hover Selects links on mouse over 1
:in-range input:in-range Selects input elements whose value is within a range 3
:invalid input:invalid Selects input elemets with invalid value 3
:lang(language) p:lang(en) Selects <p> element with a lang attribute equal to "en" (English) 2
:last-child p:last-child Selects <p> element that is the last child within its container 3
:last-of-type p:last-of-type Selects <p> element that is the last <p> element within its container 3
:link a:link Selects all unvisited links 1
:not(selector) :not(div) Selects element that is not a <div> element 3
:nth-child(n) p:nth-child(2) Selects <p> element that is the second child within its container 3
:nth-last-child(n) p:nth-last-child(2) Selects <p> element that is the second child counting from the last within its container 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects <p> element that is the second <p> counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects <p> element that is the second <p> element 3
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element within its container 3
:only-child p:only-child Selects <p> element that is the only child within its container 3
:optional input:optional Selects input elements with no "required" attribute 3
:out-of-range input:out-of-range Selects input elements whose value is outside a range 3
:read-only input:read-only Selects input elements with the "readonly" attribute 3
:read-write input:read-write Selects input elements whose "readonly" attribute is not set 3
:required input:required Selects input elements with "required" attribute 3
:root :root Selects the document's root element 3
::selection ::selection Selects the portion of an element that is selected  
:target #id:target Selects the current active #id element 3
:valid input:valid Selects input elements with a valid value 3
:visited a:visited Selects all visited links 1