CSS Selector Reference: CSS Selectors


CSS Combinators
Descendant Selector
Child Selector
Adjacent Sibling Selector
General Sibling Selector
What are Pseudo-classes?
Anchor Pseudo-classes
Pseudo-classes and CSS Classes
Hover on < div>
Simple Tooltip Hover
CSS - The :first-child Pseudo-class
Match the first p element
Match the first i element in all p elements
Match all i elements in all first child p elements
CSS - The :lang Pseudo-class
All CSS Pseudo Classes
All CSS Pseudo Elements
CSS Pseudo-elements
The ::first-line Pseudo-element
The ::first-letter Pseudo-element
Pseudo-elements and CSS Classes
Multiple Pseudo-elements
CSS - The ::before Pseudo-element
CSS - The ::after Pseudo-element
CSS - The ::selection Pseudo-element
All CSS Pseudo Elements
All CSS Pseudo Classes



In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.



CSS Combinators

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements: 


Example


div p {
    background-color: yellow;
}

Try it Yourself »

Child Selector

The child selector selects all elements that are the immediate children of a specified element.

The following example selects all <p> elements that are immediate children of a <div> element:


Example


div > p {
    background-color: yellow;
}

Try it Yourself »

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The following example selects all <p> elements that are placed immediately after <div> elements:


Example


div + p {
    background-color: yellow;
}

Try it Yourself »

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements: 


Example


div ~ p {
    background-color: yellow;
}

Try it Yourself »


Selector Example Example description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
: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
: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
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links


What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:




Mouse Over Me






Syntax

The syntax of pseudo-classes:



selector:pseudo-class {
    property:value;
}

Anchor Pseudo-classes

Links can be displayed in different ways:


Example


/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
ahover {
    color: #FF00FF;
}

/* selected link */
a:active {
nbsp;   color: #0000FF;
}
Try itYourself »

Note: <code>a:link and <code>a:active MUST come after <code>a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.




Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

When you hover over the link in the example, it will change color:


Example


ahighlight:hover {
    color: #ff0000;
}
Try it Yourself »

Hover on < div>

An example of using the <code>:hover pseudo-class on a <div> element:


Example


div:hover {
    background-color: blue;
}
Try it Yourself »

Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip):


Tada! Here I am!



Example


p
    display: none;
    background-color: yellow;
    padding: 20px;
}

    display: block;
}
Try it Yourself »

CSS - The :first-child Pseudo-class

The <code>:first-child pseudo-class matches a specified element that is the first child of another element.

Match the first p element

In the following example, the selector matches any <p> element that is the first child of any element:


Example


p:first-child {
   color: blue;
}
Try it Yourself »

Match the first i element in all p elements

In the following example, the selector matches the first <i> element in all <p> elements:


Example

p i:first-child {
    color: blue;
}
Try it Yourself »

Match all i elements in all first child p elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:


Example


p:first-child i
    color: blue;
}
Try it Yourself »

CSS - The :lang Pseudo-class

The <code>:lang pseudo-class allows you to define special rules for different languages.

In the example below,

Example


<head>
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Try it Yourself »

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »

All CSS Pseudo Classes

Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
: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
: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
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read-write Selects <input> elements with no "readonly" attribute
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links

All CSS Pseudo Elements

Selector Example Example description
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user


CSS Pseudo-elements

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Syntax

The syntax of pseudo-elements:



selector::pseudo-element {
    property:value;
}


Notice the double colon notation - <code>::first-line versus <code>:first-line

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.


The ::first-line Pseudo-element

The <code>::first-line pseudo-element is used to add a special style to the first line of a text.

The following example formats the first line of the text in all <p> elements:


Example 


p::first-line {
  nbsp;color: #ff0000;
    font-variant: small-caps;
}
Try it Yourself »

Note: The <code>::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the <code>::first-line pseudo-element:




The ::first-letter Pseudo-element

The <code>::first-letter pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements: 


Example


p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
Try it Yourself »

Note: The <code>::first-letter pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-letter pseudo- element: 

font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

    • Pseudo-elements and CSS Classes

    Pseudo-elements can be combined with CSS classes: 


    Example

    p.intro::first-letter {
        color: #ff0000;
        font-size:200%;
    }
    Try it Yourself »

    The example above will display the first letter of paragraphs with class="intro", in red and in a larger size.

    Multiple Pseudo-elements

    Several pseudo-elements can also be combined.

    In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:


    Example


    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }

    p::first-line {
    nbsp;   font-variant: small-caps;
    }
    Try it Yourself »

    CSS - The ::before Pseudo-element

    The <code>::before pseudo-element can be used to insert some content before the content of an element.

    The following example inserts an image before the content of each <h1> element:


    Example


    h1::before {
        content: url(smiley.gif);
    }
    Try it Yourself »

    CSS - The ::after Pseudo-element

    The <code>::after pseudo-element can be used to insert some content after the content of an element.

    The following example inserts an image after the content of each <h1> element:


    Example

    h1::after
        content: url(smiley.gif);
    }
    Try it Yourself »

    CSS - The ::selection Pseudo-element

    The <code>::selection pseudo-element matches the portion of an element that is selected by a user.

    The following CSS properties can be applied to <code>::selection: <code>color, <code>background, <code>cursor, and <code>outline.

    The following example makes the selected text red on a yellow background:


    Example


    ::selection {
        color: red;
        background: yellow;
    }
    Try it Yourself »

    Test Yourself with Exercises!

    Exercise 1 »  Exercise 2 »  Exercise 3 »

    All CSS Pseudo Elements

    p::before
    Selector Example Example description
    ::after p::after Insert something after the content of each <p> element
    ::before Insert something before the content of each <p> element
    ::first-letter p::first-letter Selects the first letter of each <p> element
    ::first-line p::first-line Selects the first line of each <p> element
    ::selection p::selection Selects the portion of an element that is selected by a user

    All CSS Pseudo Classes

    Selector Example Example description
    :active a:active Selects the active link
    :checked input:checked Selects every checked <input> element
    :disabled input:disabled Selects every disabled <input> element
    :empty p:empty Selects every <p> element that has no children
    :enabled input:enabled Selects every enabled <input> element
    :first-child p:first-child Selects every <p> elements that is the first child of its parent
    :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
    :focus input:focus Selects the <input> element that has focus
    :hover a:hover Selects links on mouse over
    :in-range input:in-range Selects <input> elements with a value within a specified range
    :invalid input:invalid Selects all <input> elements with an invalid value
    :lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
    :last-child p:last-child Selects every <p> elements that is the last child of its parent
    :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
    :link a:link Selects all unvisited links
    :not(selector) :not(p) Selects every element that is not a <p> element
    :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
    :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
    :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
    :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
    :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
    :only-child p:only-child Selects every <p> element that is the only child of its parent
    :optional input:optional Selects <input> elements with no "required" attribute
    :out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
    :read-only input:read-only Selects <input> elements with a "readonly" attribute specified
    :read-write input:read-write Selects <input> elements with no "readonly" attribute
    :required input:required Selects <input> elements with a "required" attribute specified
    :root root Selects the document's root element
    :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
    :valid input:valid Selects all <input> elements with a valid value
    :visited a:visited Selects all visited links