Understanding the Difference Between : and :: in CSS

Discover the nuances between : and :: in CSS and level up your styling game.

Photo by Cullan Smith on Unsplash

CSS, or Cascading Style Sheets, is a powerful language used to style and format web pages. As you delve deeper into CSS, you may come across the use of colons (:) and double colons (::) in CSS selectors. These symbols have specific meanings and are used to target different elements or states within an HTML document.

Understanding Pseudo-Classes (:)

Let’s start by examining the role of the colon (:) in CSS. The colon is primarily used to select pseudo-classes. But what exactly are pseudo-classes?

In CSS, pseudo-classes allow us to select and style elements based on conditions or states that are not explicitly defined in the HTML structure. These conditions can include user interactions, such as hovering over an element or clicking on a link, or even information stored in the browser, like visited links.

To use a pseudo-class, we attach it to the end of a CSS selector using the colon (:) symbol. Here's an example:

a:hover {
  color: red;
}

In the code snippet above, we’re targeting the a (anchor) element and applying a red color to it when the user hovers over it. The :hover pseudo-class represents the state when the mouse cursor is positioned over the element.

Another commonly used pseudo-class is :visited. It allows us to style links that have been visited by the user. Here's an example:

a:visited {
  color: purple;
}

In the code above, the a:visited selector sets the color of visited links to purple. This is a useful technique for indicating to users which links they have already visited.

Pseudo-classes can be combined with other selectors to target specific elements. For instance, you can use the :first-child pseudo-class to select the first child element of its parent:

li:first-child {
  font-weight: bold;
}

In this example, the li:first-child selector targets the first li element within its parent container and applies a bold font weight to it.

To explore the full range of pseudo-classes available in CSS, you can refer to the extensive documentation on MDN.

Exploring Pseudo-Elements (::)

Now that we understand pseudo-classes, let’s shift our focus to pseudo-elements, which are represented by the double colon (::) notation in CSS selectors.

Pseudo-elements enable us to select and style specific parts of an element’s content or structure. Unlike pseudo-classes, which target elements based on conditions or states, pseudo-elements are used to create additional elements within an element. These pseudo-elements do not exist in the HTML structure but are generated by CSS.

One commonly used pseudo-element is ::before. It allows us to insert content before the content of an element. Here's an example:

p::before {
  content: ">> ";
}

In the code snippet above, the p::before selector inserts the string ">> " before the content of every p element. This technique can be useful for adding decorative or informational elements to your layout.

Similarly, the ::after pseudo-element inserts content after the content of an element. Here's an example:

p::after {
  content: " <<";
}

In this case, the p::after selector adds the string " <<" after the content of each p element.

In this article, I introduce some more lesser-known pseudo-elements for your reference:

9 CSS Pseudo-Elements You Didn’t Know About

Summary

In conclusion, the difference between : and :: in CSS lies in their usage and purpose. The colon (:) is used to select pseudo-classes, which allow us to target elements based on conditions or states, such as user interactions or browser information. On the other hand, the double colon (::) is used to select pseudo-elements, which enable us to create additional elements within an element or style-specific parts of an element's content or structure.

Thanks for reading! Love these stories? Support me with a membership for monthly handpicked articles. Or join Medium via my link.