• Post category:CSS

CSS Double Colon Notation | Explained

CSS Double Colon

In this article, we will see about why we use CSS double colon. Do you ever have a question about the difference between a single and double colon notation in CSS?

What is pseudo-class

The pseudo-class selector selects the element based on its current state. For example,

  • :hover – It selects the element when the cursor is hovering over it.
  • :active – When the element is clicked.

Example for Single colon:

<!DOCTYPE html>
<html>
<head>
<title>Single colon</title>
</head>
<style type="text/css">
/*Single colon Notation*/
a:hover{
color: black;
}
</style>
<body>

<a href="#">Click Here</a>
</body>
</html>

Output:

css double colon

In the above code, we have a <a> tag with an empty linking page. So, the default color of <a> anchor tag is blue. I want to create a when the user hovers over the link the color will change to black, so In CSS we use the “hover” pseudo-class selector and apply the color to black. See the above output, when I hover the mouse over a link, the color of the link is changed to black. So, This is the usage of single colon notation in CSS.

What is pseudo-element

Which let us apply the CSS to the element that does not exist but can be targeted for styling. For example,

  • ::before
  • ::after
  • ::first

Example of double colon pseudo-element

<!DOCTYPE html>
<html>
<head>
<title>Double Colon</title>
</head>
<style type="text/css">
p::before{
content: "Read this :- ";
}
</style>
<body>
<h1>Double colon</h1>
<p>My Name is John</p>
<p>I live in Chennai.</p>
</body>
</html>

Output:

css double colon

In the above code , we have a <h1> element and 2 <p> tag with some text. I want to add some content before all <p> tags, so I use the ::before pseudo-element and set the content property to “Read this”. Before the paragraph text runs, the text “read this” is displayed.

READ ALSO  How to Make Background Transparent CSS

The CSS1 and CSS2 there is only a single colon notation, which means both pseudo-class and pseudo-element selectors are using the same syntax. But then in CSS3 there is an attempt to distinguish between the pseudo class and pseudo-element, so they suggest we should use double colon notation for a pseudo-element. To remain the backward compatibility for older browsers. The single colon notation is still acceptable, which means both single and double notation are still valid.

If you are working on a website that really has to support other browsers like Internet Explorer 8 and below then you should use a single colon other than that there is no reason. I can think of to still using a single colon with pseudo-element selectors.

Leave a Reply