CSS Selectors

written on May 26th, 2014

A Short Guide to CSS Selectors

A common way to apply CSS to an HTML element is through either a Class or an ID attribute. But that is only the tip of the iceberg. CSS standards, and especially CSS3 standards provide powerful ways to control the style of an element.

Jump to: Simple Selectors, Psuedo Classes & Elements, Attribute Selectors, and Some Examples

Simple CSS Selectors

Tag Selector

You may select all HTML elements of type.

<p>Paragraph</p>
p { /* styles go here */ }

Class Selector

The class selector is used to target all elements which have been given the specified class.

<div class="x">content</div>
.x { /* styles go here */ }

Id Selector

The Id selector is used to target all elements which have been given the specified id.

<div id="x">content</div>
#x { /* styles go here */ }

Select All

You may select all elements in the current scope using an asterisk.

<!-- all three tags, the p, strong, and em, will be targeted -->
<p>Paragraph <strong>Bold</strong> <em>Italic</em></p>
* { /* styles go here */ }

Descendant Selector

The descendant selector will select all elements nested within another element.

<div>
    <!-- this p tag will be targeted -->
    <p>Paragraph</p>
</div>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
div p { /* styles go here */ }

Adjacent Selector

The adjacent selector will select all elements that appears immediately after another element.

<div>
    <!-- this p tag will NOT be targeted -->
    <p>Paragraph</p>
</div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
div + p { /* styles go here */ }

Direct Child Selector

The direct child selector will select all elements that is a direct child of another element.

<div>
    <!-- this p tag will be targeted -->
    <p>Paragraph</p>
    <div>
         <!-- this p tag will NOT be targeted -->
        <p>Paragraph</p>
    </div>
</div>
div > p { /* styles go here */ }

Sibling Selector

The sibling selector will select all elements that share a parent and proceed another element.

<div>Div tag</div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<div>
     <!-- this p tag will NOT be targeted -->
    <p>Paragraph</p>
</div>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
div ~ p { /* styles go here */ }

Psuedo Selector & Elements

A psuedo class is so called because it attaches itself to a selector, whether an tag, class, or id. Psuedo “Elements” are so called because they do not target an element directly, but rather an aspect of an element (the pseudo elements are :before and :after).

Language Selector

The language pseudo class specifies the styling of an element of a given language

<!-- not targeted -->
<div lang="en">Something</div>
<!-- targeted -->
<div lang="de">etwas</div>
div:lang(de) { /* styles go here */ }

Hover Selector

The hover selector specifies the styling of an element whenever the user hovers the cursor over it.

a { /* styles go here */ }
a:hover { /* mouse over styles go here */ }

Active Selector

The active selector is triggered whenever an element is clicked. The state usually remains until the click is released.

button { /* default style */ }
button:active { /* style when pressed */ }

Target Selector

The target selector specifies the style of an element which has the id of the link pressed.

<a href="#somewhere">Link</a>
<div id="somewhere">Div</div>
:target { /*styles go here*/ }
/* or specify target */
#somewhere:target { /*styles go here */ }

Link Pseudo classes target the various states of an anchor. There are two states: 1) :link indicates any unvisited anchor 2) :visited indicates when an anchor has been previously visited.

a:link { /* styles go here */}
a:visited { /* for security, you may only specify color styles */}

Input Pseudo Classes

The input pseudo classes affect the state of various input elements.

The :focus class selects form elements which are in focus and ready to accept input. The :enabled class selects form elements which are not disabled. the :disabled class selects form elements which are not enabled. The :checked class selects radio or check box elements which have been selected.

input:focus { /*styles go here*/ }
input:enabled { /*styles go here*/ }
input:disabled { /*styles go here*/ }
input[type="checkbox"]:checked { /*styles go here*/ }

Selection Element

The selection element indicates the style of an element when selected or highlighted by the user. For example, if you highlight something on this page, you will notice that the selection background is red.

::selection { /* styles go here */ }

First Letter Selector

The first letter element will target the first letter of an element, including any preceding punctuation. It is used most often on a p tag and in conjunction with a header tag.

/* target the first letter of the first paragraph after an h3 tag */
h3 + p:first-letter { /* styles go here */ }

First Line Element

The first line element will target the first line of an element. It too is used most often on a p tag and in conjunction with a header tag.

/* target the first line of the first paragraph after an h3 tag */
h3 + p:first-line { /* styles go here */ }

First Child Selector

The first child selector will select the first element of some type in a series of elements.

<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
p:first-child { /* styles go here */ }

Last Child Selector

The last child selector will select the last element of some type in a series of elements.

<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
p:last-child { /* styles go here */ }

First of Type

The first of type selector will select the first child of the specified type in a series of elements.

<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the first <p> tag will be targeted */
p:first-of-type { /* styles go here */ }

Last of Type

The last of type selector will select the last child of the specified type in a series of elements.

<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
/* the first <p> tag will be targeted */
p:first-of-type { /* styles go here */ }

Nth Child Selector

The nth child selector will select the nth child of an element in a series of elements, where n may be an algebraic expression.

<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the 3rd, 5th, 7th, etc. element will be targeted if it is a <p> */
p:nth-child(2n+1) { /* styles go here */ }

Nth of Type Selector

The nth of type selector will select the nth child of the specified type in a series of elements, where n may be an algebraic expression.

<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
/* the 3rd, 5th, 7th, etc. <p> tag will be targeted */
p:nth-of-type(2n+1) { /* styles go here */ }

Nth Last Child Selector

The nth last Child selector will select the nth child in a series of elements starting from the bottom, where n may be an algebraic expression.

<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this h2 tag will NOT be targeted -->
<h2>Header 2</h2>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the 3rd to last, 5th to last, 7th to last, etc. element will be targeted if it is a <p> tag */
p:nth-last-child(2n+1) { /* styles go here */ }

Nth of Last of Type Selector

The nth last of type selector will select the nth child of the specified type in a series of elements starting from the bottom, where n may be an algebraic expression.

<!-- this h1 tag will NOT be targeted -->
<h1>Header 1</h1>
<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
/* the 3rd to last, 5th to last, 7th to last, etc. <p> tag will be targeted */
p:nth-last-of-type(2n+1) { /* styles go here */ }

Only Child Selector

The only child selector will select an element if it is the only child element.

<ul>
    <!--this <li> tag will be targeted-->
    <li>List</li>
</ul>
<ul>
    <!--these <li> tag will NOT be targeted-->
    <li>List</li>
    <li>List</li>
</ul>
ul li:only-child { /* styles go here */ }

Only of Type Selector

The only of type selector will select an element if it is the only element of its kind in a series of elements.

<ul>
    <!--this <li> tag will be targeted-->
    <li>List</li>
    <p>Paragraph</p>
</ul>
<ul>
    <!--these <li> tag will NOT be targeted-->
    <li>List</li>
    <li>List</li>
</ul>
ul li:only-of-type { /* styles go here */ }

Not Selector

The not selector will target any element not specified by some css expression.

<!-- this p tag will be targeted -->
<p>Paragraph</p>
<!-- this p tag will NOT be targeted -->
<p class="this">Paragraph</p>
p:not(.this) { /* styles go here */ }

Empty Selector

The empty selector will target an element when it is empty of content or another element.

<!-- this p tag will be targeted -->
<p><!-- Comments do not count as content --></p>
<!-- this p tag will NOT be targeted -->
<p>Paragraph</p>
p:empty { /* styles go here */ }

Before Element

The before element is a pseudo element that is visually inserted onto the page before the element without actually appearing in the DOM. :before requires the content attribute.

<span class="this">here</span>
::::css
/* The page would read "this here" */
.this:before { content: "this "}

After Element

The after element is a pseudo element that is visually inserted onto the page after the element without actually appearing in the DOM. :after requires the content attribute.

<span class="this">here</span>
::::css
/* The page would read "here is this" */
.this:after { content: "is this "}

Attribute Selection

In css you may target any element through its attribute. The attribute does not need to be a commonly used or documented attribute; in fact, you may select an element by an arbitrarily created attribute. e.g. <span some="attribute">Word</span> can by targeted by span[some="attribute"] { }.

Attribute Selector

You may select all HTML elements of a type with a particular attribute.

<a href="#" title="some title">Link</p>
/* this will select all <a> tags with any title */
a[title] { /* styles go here */ }

Attribute Equals Selector

You may select all HTML elements of the specified type where the attribute value matches exactly.

<a href="#" title="lol">Link</p>
/* this will select all <a> tags with a title that is lol */
a[title="lol"] { /* styles go here */ }

Attribute Matches Selector

You may select all HTML elements of the specified type where the value appears within the attribute.

<a href="https://www.google.com">Link</p>
/* this will select all <a> tags with an href that contains the string google */
a[href*="google"] { /* styles go here */ }

Attribute Begins Selector

You may select all HTML elements of the specified type where the attribute begins with the value.

<a href="https://www.google.com">Link</p>
/* this will select all <a> tags with an href that begins with https */
a[href^="https"] { /* styles go here */ }

Attribute Begins Selector

You may select all HTML elements of the specified type where the attribute ends with the value.

<img src="/img/image.jpg">
/* this will select all <img> tags with an src that ends with .jpg */
img[href$=".jpg"] { /* styles go here */ }

Space Separated List Selector

You may select all HTML elements of the specified type where the attribute contains the value within a space separated list.

<a rel="some values" href="#">Link</a>
/* this will select all <a> tags with a rel that contains some  */
a[rel~="some"] { /* styles go here */ }

Dash Separated List Selector

You may select all HTML elements of the specified type where the attribute contains the value within a dash separated list.

<a rel="some-person" href="#">Link</a>
/* this will select all <a> tags with a rel that contains some  */
a[rel~="person"] { /* styles go here */ }