What's the difference between : and :: in CSS?
Tags: css, webdev, beginners
Published: 2022-09-01 09:41:50

I spent years Googling “the difference between : and :: in CSS” before the information stayed in my brain. Sound familiar? Then this post is for you.

First up: if you need a quick answer to the title of this blog post then look no further!

- `:` refers to pseudo-classes, such as `:visited` or `:hover`
- `::` is for pseudo-elements, such as `::first-of-type` or `::after`

And if you want a more detailed explanation, let’s dive into some examples.

## What does “pseudo” mean?

The English definition of the word _pseudo_ is “fake” or “not real”. So what on earth do we mean by _fake classes_ and _fake elements_? Pseudo-classes and pseudo-elements are not _manually_ written into HTML and don’t appear in the DOM (or document tree), but instead are **created by CSS**!

## What’s a pseudo-class?

Pseudo-classes allow you to select elements in CSS based on information outside of the HTML written on the page, such as user interaction or information stored in the browser. Pseudo-classes are accessed by a single colon (:) followed by the pseudo-class name.

You can use pseudo-classes to style an element based on its state. You might often see links you’ve visited on a page appear as a different colour. This is achieved by targeting the `:visited` pseudo-class of an anchor tag (`a`) in CSS to style it.

```css
a:visited {
  color: #c58af9;
}
```

You can observe this in action on Google’s search engine. Head on over to [google.com](https://google.com) and search for something you know you’ve visited. Open up the browser dev tools, and find the `a:visited` selector in the CSS inspector.

![Screenshot of dark mode google search results showing the link to the top site I have visited is purple, and the second site in the list which I have not visited, which is blue. Dev tools is open and shows the anchor visited styles coming from the stylesheet.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22l64033uxqu0978tmgf.png)

As well as being affected by browser information such as visited links, pseudo-classes can also be affected (added or removed) by user actions on the page, such as hovering over or focussing on elements. Here’s the `:hover` pseudo-class in action on Google search results.

```css
a:hover {
  text-decoration: underline;
}
```

![Screenshot of google search results showing I am hovering over the top result, which is adding an underline to the link. Dev tools are open showing the style applied using the hover pseudo class.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2op1gghmv3o1zmr3sns.png)

To read more about the different types of pseudo-classes available to target in CSS, you can check out the [extensive documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes).

## What’s a pseudo-element?

Pseudo-element selectors allow you to use CSS to style a _specific part_ of a DOM element. Pseudo-elements are accessed by a double colon (::) followed by the pseudo-element selector. Unlike pseudo-classes, pseudo-elements cannot be used to style an element according to its _state_.

Here’s an example. Often, article-based websites use “drop caps”, a print convention that has existed for thousands of years, which uses a very large single letter to mark the start of a block of text. You can achieve this by targeting the `::first-letter` pseudo-element in CSS.

```css
p::first-letter {
  font-size: 300%;
}
```

Here’s a visual example showing how drop caps would look on my blog posts.

![A blog post on my site showing a large uppercase letter E at the start of a paragraph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtvit36joa3d02jj3oyq.png)

You can also choose to target the first line of an element, using the `::first-line` selector.

```css
p::first-line {
  font-size: 300%;
}
```

Other common pseudo-element selectors you might use in your CSS files include:

- `::before`
- `::after`
- `::first-of-type`
- `::last-of-type`
- and `::placeholder`.

Read more about the different types of pseudo-elements available to target in CSS on the [official MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements).

And that’s it! May this be the last time you google the difference between `:` and `::` in CSS!