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:
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:
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.
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.
