Pseudo Classes
Pseudo Classes are the keywords which is used after the selector which help in defining or designing the state of the selector. For example, if you use CSS, you must have used :hover keyword in buttons or links, this is the pseudo class.
Syntax :
selector:pseudo-class {
/* content */
property: value;
}
Pseudo class starts with selector and then “ : “ followed by pseudo class keyword.
when using pseudo class, always write them word by word without giving any space between them. Not like button : hover or button: hover or button :hover, always like this → button:hover. Because if there is any space between the selector and ‘:’ or ‘:’ and keyword then it will not work.
Example :
In this example, I will talk about some of the pseudo classes and if want to know about all the pseudo classes, click this link → https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Lets take a code of html and then apply the style and pseudo classes on the html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Classes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="greeting">Hover here
<p>Hello</p>
</div>
</body>
</html>
We have a div element, in which Hover here is written and a p element. I want the p element to be hidden and when I hover over the div, it appears. To do this, I will use :hover pseudo class.
:hover
It is use to style the link if the mouse is over it.
div p {
padding: 10px 20px;
display: none;
}
div:hover p {
display: block;
font-size: 1.1em;
background-color: darkorange;
}
Lets take another HTML code and some other pseudo classes to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo classes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="https://www.google.com">Google</a>
</body>
</html>
In this, I want the a element to change the font size and its color when hover over it and when the link is not visited, it color is different and when the link is visited it’s color is different and when I select the link, it’s color is different.
:link
It is use to style the link that is not visited. We can change the color of link, if not visited.
/* when the link is not visited */
a:link {
color: #FF0000;
}
:visited
It is use to style the link when it is already visited. We can change the color of link, if visited.
/* when the link is visited */
a:visited {
color: #00FF00;
}
:active
It is used to style the link if it is selected. We can give different color to link if it is selected.
/* when the link is selected */
a:active {
color: #0000FF;
}
and if I want the color of link to be different if the mouse is over the link, then I will use :hover keyword.
/* when the mouse is over the link */
a:hover {
color: #FF00FF;
}
These are the some of the pseudo classes. To know about all the pseudo classes, visit mdn website or click the link given above.
Pseudo Elements
Pseudo Elements are keywords which are used to style the specific parts of selected element.
Syntax :
pseudo element starts with selector and then :: followed by pseudo element.
selector::pseudo-element {
/* content */
property: value;
}
for example, ::first-line is used to style the first line of different selectors like paragraph.
p::first-line {
color: darkorange;
}
when using pseudo elements, always write them word by word without giving any space between them. Not like p :: first-line or p:: first-line or p ::first-line, always like this → p::first-line. Because if there is any space between the selector and ‘::’ or ‘::’ and keyword then it will not work.
Example :
I will talk about some of the pseudo elements and if you want to know about more pseudo elements, click the link → https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Let’s take a HTML code and apply some pseudo elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo Elements</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus fuga ullam quas corporis
vel reprehenderit molestiae nam velit. Ut nulla vitae nobis tenetur voluptatibus reiciendis.
Distinctio possimus fuga doloribus reprehenderit.
</p>
<ul id="fruit">
<li id="apple">apple</li>
<li id="orange">orange</li>
<li id="banana">banana</li>
</ul>
</body>
</html>
I want the first letter of the head to big and the first line of paragraph have different color or background color. When I select the texts from the paragraph, it’s background should be different and it’s color also be different. The dots that appear before the list elements, it should placed by ✔️and after the list elements it should show the icon of the fruits. So, its know about different pseudo selector to do the job.
::first-letter
It can style the first letter of the selector. We can change the size of first letter of Hello.
h1::first-letter {
font-size: 2em;
}
::first-line
It can style the first line of the selector. We can change the background color and style of first line of paragraph.
p::first-line {
background-color: darkorange;
font-style: italic;
}
::selection
To style the selected portion of selector. When we select some text of paragraph, it’s background color changes and font color also.
p::selection {
color: rgb(89, 255, 71);
background-color: hsl(0, 0%, 21%);
}
::marker
To style the marker of list. We can remove the dot of list.
fruit::marker {
content: "✔️";
color: hsl(120, 100%, 64%);
font-size: 1.2em;
}
::after
It is used to insert some content after the end of content of the selected element. We can insert the fruit icons after the name of fruits.
#apple::after{
content: "🍎";
}
#orange::after{
content: "🍊";
}
#banana::after{
content: "🍌";
}
::before
It is used to insert some content in start of the content of selected element. We can insert the smile face before the Hello.
h1::before {
content: "😊";
}
These are the some of pseudo elements that are used most of time (according to me only). To know about more pseudo elements visit mdn or click the link above.
Conclusion
In conclusion, understanding and utilizing pseudo classes and pseudo elements in CSS can significantly enhance the visual appeal and interactivity of a website. Pseudo classes allow developers to style elements based on their state, such as when a user hovers over a link or when a link has been visited. On the other hand, pseudo elements enable styling of specific parts of an element, like the first letter or line of a paragraph. By mastering these tools, web designers can create more dynamic and engaging user experiences, ultimately improving the overall look and feel of their websites.