CSS Selectors
Tags: css, beginners
Published: 2019-10-28 14:08:12

---
title: CSS Selectors
published: true
description: A beginners guide to CSS Selectors
tags: css, beginners
series: FrontEnd Development Zero to Hero
---
Welcome, In this section, we will be taking a tour of CSS Selectors which are myriad of ways of targeting HTML Elements for styling purposes, some of these stylings can include:

* increasing or decreasing the font size of an element
* adding some colors (background, text e.t.c)
* organizing the page layout. e.t.c

I will be your companion for this tour but our guide will be the CSS Specification specifically [Chapter 5 of the CSS Specification Level 2.1]( https://www.w3.org/TR/CSS21/selector.html#q5.0) and [Selectors Level 3 Specification](https://drafts.csswg.org/selectors-3/). Why two Specifications?

Selectors were part of CSS2.1 Specification specifically Chapter 5, but Selectors Level 3 is an independent Specification on its own. Now, what is the difference between these two? [Chapter 1.3 of the  Selectors Level 3 Specification](https://drafts.csswg.org/selectors-3/#changesFromCSS2) states the difference as follows:

> * an optional namespace component is now allowed in element type selectors, the universal selector and attributes selectors.
* a new combinator has been introduced.
* new simple selectors including substring matching attribute selectors, and new pseudo-classes.
* new pseudo-elements, and introduction of the "::" convention for pseudo-elements.
* the grammar has been rewritten.
* profiles to be added to specifications integrating Selectors and defining the set of selectors which is actually supported by each specification
* Selectors are now a CSS3 Module and an independent specification; other specifications can now refer to this document independently of CSS.
* the specification now has its own test suite.

What this means is that you will find some information that is the same in CSS 2.1 specification Chapter 5 and Selectors Level 3 Specification. Examples include code samples and tabular information.

Before we proceed into selectors in detail, there is a particular thing that caught my interest in the specification that we need to discuss and that's on the subject of [pattern matching in CSS2.1 specification](https://www.w3.org/TR/CSS21/selector.html#pattern-matching):

> In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, __may range from simple element names__ to __rich contextual patterns__. If __all conditions in the pattern are true__ for a certain element, the selector matches the element.

>The case-sensitivity of document language element names in selectors depends on the document language. For example, __in HTML, element names are case-insensitive__, but __in XML they are case-sensitive__. 

I have highlighted some points of interest, but what this paragraph is trying to tell us is simple. Selectors can be HTML elements name like `h1`, `div`, `aside`, `footer` or rich contextual patterns. Now you might ask, what patterns and why are they considered "rich"? Let's take some examples from the spec:

`E[foo^=bar]` - This will match an Element E whose "foo" attribute begins exactly with a string "bar". Why at the beginning? if we break the example into pieces we get:

`E` `[` `foo` `^` `=` `bar` `]` 

The symbol `^` before the equals sign (`=`) is what makes this selector match a foo attribute with the string "bar" at the beginning. It's called the caret sign (symbol) and it's used in Regular Expressions for Pattern Matching. We will not be discussing Regular Expressions, but you should note that.

Another Example is `E[foo$=bar]`. This is the opposite of our previous example, but in this case, it will match the foo attribute value that ends with exactly the string bar. The dollar symbol (`$`) is responsible for this i.e matching element at the end of a string.

Another example i will like to add:

`div > p:first-child span.highlight`

This will match a span element with a class of highlight located in the first paragraph inside the div element. The ability to do this in CSS is why the Spec refereed to them as __rich contextual patterns__.

Now, let's discuss the selectors you can use in your web pages, we will start with selectors that you will use quite often to the ones you might use sparingly. Lets begin with the Universal  Selector.

_Before that, to follow along with the code snippets in this section, please create a skeleton page similar to the one in [HTML Elements and Tags](https://dev.to/ziizium/html-elements-and-tags-4gdi) with one modification: create an empty file and save it with the `.css` extension, and link to this file in your `head` element_

```html
<head>
  <!-- the 'href' attribute should point to the location of your css file -->
  <link rel="stylesheet" href="pseudo-class.css">
</head>
```

<hr>

###__UNIVERSAL__ __SELECTOR__

Universal Selectors are covered in [Section 5.3 of the CSS2.1 spec]( https://www.w3.org/TR/CSS21/selector.html#universal-selector) and [Section 6.2 of the Selector level 3 spec](https://drafts.csswg.org/selectors-3/#universal-selector). 

The CSS2.1 Spec states:
 
> The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree. The code snippet below will add an outline to all page elements. 

The word "universal" here means this selector denoted with '*' matches every element in the document.  The CSS code snippet below will apply to all elements in the documents.

The following CSS snippet will give all the page element an `outline` color of blue.

```css
* {
  outline: 2px solid #1560bd;
}
```
The image below is an example of this selector when applied to an HTML document.

![The CSS outline property applied to an HTML document](https://thepracticaldev.s3.amazonaws.com/i/9oxlvc9y0u573nzrdmie.png)

###__TYPE__ __SELECTORS__

The definition of type selectors are phrased differently in both specs, but that of the [CSS2.1 Specification]( https://www.w3.org/TR/CSS21/selector.html#type-selectors )  seems to be quiet straight forward for a beginner:

> A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. 

The "document language element type" the Spec is referring to are HTML Elements which can include `h1`, `h2`, `div`, `aside`, `p`, or `span` elements. For example:

```html
<p>This is a paragraph with an hello class</p>
```
```css
p {
	background-color: #1560bd;
	color: #ffffff;
	padding: 0.6em;
}
```

###__CLASS__ __SELECTORS__

Class Selectors are quite common and their usage is encouraged by the Web Development community as they have a lower specificity compared to the id selector (discussed next). [The spec](https://drafts.csswg.org/selectors-3/#class-html) states (emphasis mine):

> __Working with HTML, authors may use the "period" notation__ (also known as "full stop", U+002E, .) as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div.value and div[class~=value] have the same meaning. __The attribute value must immediately follow the full stop (.)__. 

__This statement roughly translates to__: the class attribute you give your HTML Element should start with a full stop sign ( . ) in CSS. If you give your HTML Element a class attribute of sunshine, then to use it in CSS, it will be `.sunshine` then the curly braces. The code snippet below demonstrates this.

```html
<p class="sunshine">This is a paragraph with a sunshine class</p>
```
```css
.sunshine {
	background-color: #1560bd;
	color: #ffffff;
	padding: 0.6em;
}
```

###__ID__ __SELECTORS__

The [Spec states]( https://drafts.csswg.org/selectors-3/#id-selectors ):

> Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that __no two such attributes can have the same value in a conformant document__ regardless of the type of the elements that carry them; whatever the document language, __an ID typed attribute can be used to uniquely identify its element__

This is telling us that we can only __use an id once per page with a unique value__ and they can never match more than one element in a single document. Unlike class names that start with (.) in CSS, id's start with the pound sign (#).


```html
<p id="sunshine">This is a paragraph with an id of sunshine</p>
```
```css
#sunshine {
	background-color: #1560bd;
	color: #ffffff;
	padding: 0.6em;
}
```

###__ATTRIBUTE__ __SELECTORS__

Attributes defined in an HTML document can be targeted for styling in CSS by placing them between two square brackets ( [] ). As defined in [CSS2.1 Specification](https://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html#attribute-selectors), Attribute Selectors may match in four ways:

> * `[att]` - Match when the element sets the "att" attribute, whatever the value of the attribute. 
* `[att=val]` - Match when the element's "att" attribute value is exactly "val". 
* `[att~=val]` - Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val".
* `[att|=val]` - Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-".

The following CSS will target elements that have a `class` attribute.

```css
[class]{
  /* your properties here */
}
```

Let's discuss these examples in more detail.

Given an HTML Element with a `title` attribute, the following selector will match an element with the title attribute.

```html
<p>This is <span title="Hypertext Markup Language">HTML</span></p>
```
```css
[title] {
  text-decoration: underline;
  cursor: help;
}
```

In the following example, an element with a class attribute of 'hello' will be selected.

```html
<p class="hello">This is a paragraph with an hello class</p>
```
```css
[class="hello"] {
  font-weight: bold;
  text-decoration: underline;
}
```

For the third example, lets use `[class~="second"]`  which will match an element with multiple attribute values, but one of them is exactly the string 'second' as demonstrated in the code snippet below.

```html
<p class="first second third">This is a paragraph with three classes</p>
```
```css
[class~="second"] {
  color: brown;
  border: 2px solid green;
}
```

To demonstrate the fourth example, if we have an element with an attribute value separated by a hyphen we can use this selector.

```html
<p class="fruit-juice">This is a paragraph of fruit juice</p>
```
```css
[class |= "fruit"] {
  color: orange;
  font-weight: bold;
}
```

In [Selector level 3 Spec](https://drafts.csswg.org/selectors-3/#attribute-substrings) three additional attributes are provided for matching substrings.  They are:

* `[att^=val]` - This will match an element with the "att" attribute whose value starts with the string "val", and if "val" is empty the selector does not represent anything
* `[att$=val]` - This is the opposite of `[att^=val]`, and will match an element with "att" attribute whose value ends with the string "val".
* `[att*=val]` - This will match an element with an "att" attribute which contains at least one occurrence of the string var.

Let's take some examples.

The selector `[att^=val]`, the code snippet below will select an Element with attribute value beginning with "he".

```html
<p class="hello">This is a paragraph with an hello class</p>
```
```css
[class ^= "he"] {
  color: red;
  border: 2px solid blue;
}
```

The code snippet below demonstrates the selector `[att$=val]` and it will match element whose attribute value ends wit the string "ing":

```html
<p class="ending">This ends with ing</p>
```
```css
[class $= "ing"] {
  color: brown;
  border: 2px solid blue;
}
```

The snippet below will match element whose attribute value contains "ple" demonstrating the Selector `[att *= val]`

```html
<p class="multipleclasses">This paragraph has a class name of multipleclasses</p>
```
```css
[class *= "ple"] {
  background-color: #1560bd;
  color: #ffffff;
  padding: 0.6em;
}
```

###__PSEUDO__ __CLASSES__

Sometimes you might find yourself in a situation that a `class` or `id` might seem to you as an overkill when you want to style just a specific and limited section of your document or the exact styling you want just falls out of the document structure, this is where pseudo-classes can be of great help.

From [Selectors Level 3 spec]( https://drafts.csswg.org/selectors-3/#pseudo-classes):

> The pseudo-class concept is introduced to __permit selection based on information that lies outside of the document tree__ or that __cannot be expressed using the other simple selectors.__

> A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses

I think this explanation is quite straight forward.

The specification further classifies pseudo-classes into two categories:

* Dynamic Pseudo-classes and
* Structural Pseudo-classes

####__DYNAMIC__ __PSEUDO-CLASSES__

Dynamic Pseudo-classes do not appear in the document source i.e your HTML document, and they classify elements on characteristics other than their name.

These characteristics can change based on user interaction with the Element. Example include:

* `:link` - This applies to link in your document that has not been visited
* `:visited` - This applies to links visited by the user.
* `:hover` - The `:hover` pseudo-class applies while the user designates an element with a pointing device on an element ( e.g a mouse ), but does not necessarily activate it.
* `:focus` - You will use this on an element that accepts keyboard or mouse events e.g form inputs.
* `:active` - As the name implies, it applies when an element is activated by the user.
* `:checked` - Radio and checkboxes in form can be toggled and this is when the `:checked` pseudo-class applies.

Some examples that demonstrate these selectors.

The following snippet will underline and change the color of all links on a page to blue.

```html
<a href="https://google.com">Google</a>
```
```css
a:link {
  color: #1560bd;
  text-decoration: underline;
}
```

This snippet will change the visited links on a page to a variant of red.

```html
<a href="https://google.com">Google</a>
```
```css
a:visited {
  color: #ea3c53;
  text-decoration: underline;
}
```

When you move your pointing device over an element with the following CSS, the background color will be changed to red.

```html
<p>This is a paragraph with an hello class</p>
```
```css
p:hover {
  background-color: red;
}
```

If you accept data from your users, you can use the following snippet that will indicate to the user that the input is selected and active.

```html
<form>
  <input type="text" name="example">
</form>
```
```css
input:focus {
  border: 2px solid blue;
}
```

Checkboxes have a default color of a slight blue when they are checked, this snippet will change that.

```html
<form>
  <input type="checkbox" name="simplecheckbox">
</form>
```
```css
input[type="checkbox"]:checked {
  outline: 1px solid red;
}
```

If your users decide to copy part of the text on your web page using their keyboard and mouse to select the content, the following snippet will change the font-weight to bold  giving the impression that the text is currently being selected.

```html
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span>
```
```css
span:active {
  font-weight: bold;
}
```

Some dynamic pseudo-classes not discussed are:

* `:target`
* `:lang`
* `:enabled`
* `:disabled`


####__STRUCTURAL__ __PSEUDO-CLASSES__

From [Section 6.6.5 of Selector Level 3 specification]( https://drafts.csswg.org/selectors-3/#structural-pseudos ):

> Selectors introduces the concept of structural pseudo-classes to permit selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.

__The literal translation of this sentence is__: 

> You might find yourself in situations where using a class, id, attribute selectors or dynamic pseudo-class is not fit or might be an overkill for the element you want to style, then you can result to its structural position in the document by asking yourself questions like:

> * is the element the only child of its parent?
* is the element the first child of its parent?

Let's discuss five of the most common structural pseudo-classes, they are

* `:first-child`
* `:last-child`
* `:first-of-type`
* `:last-of-type`
* `:only-child`

#####__:first-child__

First the [Spec States]( https://drafts.csswg.org/selectors-3/#first-child-pseudo):

> The :first-child pseudo-class represents an element that is first in a list of siblings.

This is simply telling us if we have a parent element ( e.g a `div` ) and many child elements like paragraphs ( `p` ), we can use this pseudo-class to select the first one.

```html
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
```
```css
div p:first-child {
  background-color: red;
  font-size: 20px;
}
```

#####__:last-child__

You might consult the spec if you want to, but I think this is quite straight forward. It selects the last element from a list of child elements.

```html
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Last item</li>
</ol>
```
```css
ol li:last-child {
  background-color: #1560bd;
  font-weight: bold;
}
```

#####__:first-of-type__

[Section 6.6.5.8 of Selector Level 3 Spec]( https://drafts.csswg.org/selectors-3/#first-of-type-pseudo):

> :first-of-type pseudo-class represents an element that is the first sibling of its type.

__This translate to__: if you have many child elements that are of the same type e.g span, or paragraph, you can use this selector to get the first occurrence of such element.  The code snippet below indicates that we have three paragraphs but only the first is selected.

```html
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>		
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
```
```css
p:first-of-type {
  background-color: #1560bd;
  color: #ffffff;
}
```

#####__:last-of-type__

This is the opposite of the `:first-of-type` pseudo-class and it selects elements that are last of its type. if you have multiple paragraphs in your document this can be used to grab the last paragraph.

```html
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
```
```css
p:last-of-type {
  background-color: #1560bd;
  color: #ffffff;
}
```

#####__:only-child__

This can be used to target elements that has no siblings. Which means Just one parent element and a single child element. This selector won't select anything if the parent has more than one child element.

```html
<div>
<!-- p is the only child of div, and we can select using :only-child -->
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit..</p> -->
</div>
```
```css
p:only-child {
  background-color: red;
  color: #ffffff;
}
```

Listed below are other structural pseudo-elements, I consider them tricky (or intimidating?) for a beginner to understand which is the reason I chose not to discuss them but if you are curious or feeling adventurous you can read them up in the [Selector Level 3 Specification](https://drafts.csswg.org/selectors-3/).

* `:root` pseudo-class
* `:nth-child()` pseudo-class
* `:nth-last-child()` pseudo-class
* `:nth-of-type()` pseudo-class
* `:nth-last-of-type()` pseudo-class
* `:only-of-type` pseudo-class
* `:empty` pseudo-class

Next, CSS Units.