There were many things that were not possible to achieve through css selectors which we have read till now, therefore we have to introduce pseudo-class selectors to achieve it. A pseudo-class is a keyword that is added to a selector to specify a particular state or condition of an element.
syntax: selector_name: action_to_be_performed
ex. p: hover
some commonly used pseudo-classes are.
hover: Applies styles when the mouse hovers over an element. Mostly used for button or anchor tag.
link: This pseudo-class selects all unvisited links. An unvisited link is a link that the user has not yet clicked on.
focus: mostly used when users have to insert the input, selects an element that has keyboard focus.
visited: once visited comes in use it has the highest priority
active: Applies styles to an element while it is being activated
first-child: Selects the first child elements of their parent, respectively
nth-child: Selects the nth child of a parent element.
even: Selects even-numbered elements within a parent element.
odd: Selects odd-numbered elements within a parent element.
Pseudo-elements:
A pseudo-element is a special type of selector in CSS that allows you to style specific parts of an element without having to create additional HTML elements. It is denoted by two colons (::)
some common pseudo-elements:
before:: Inserts content before the content of the selected element.
after:: Inserts content after the content of the selected element.
first-line:: Styles the first line of the selected element.
first-letter:: Styles the first letter of the first line of the selected element.
selection:: Styles the selected portion of text in the selected element.
code to demonstrate these properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>pseudo class</title>
<style>
/* p:hover{
background-color: aquamarine;
color: rgb(38, 0, 255);
} */
/* input:focus
{
color: red;
font-size: 27px;
} */
a:link {
color: rgb(18, 165, 25)
}
a:active {
color: chartreuse;
}
/* a:visited{
color: rgb(3, 6, 12);
} */
/*
a:first-child {
color: yellow;
}
*/
/* a:nth-child(odd) {
color: rgb(255, 0, 34);
} */
/*pseudo elements*/
/* p::first-letter {
color: blue;
} */
/* p::after {
content: "_himanshu";
color: hotpink;
} */
/* p::before{
content: "_//before";
color: hotpink;
} */
p::first-line {
font-size: 18px;
color: red;
}
/*
p::selection {
background-color: blueviolet;
color: bisque;
} */
</style>
</head>
<body>
<p class="hover">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, eos. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur iusto quam et sint adipisci animi minima dolorem perferendis. Reiciendis minima dolore unde modi hic accusamus nam nostrum minus adipisci voluptates.
</p>
<input type="text" />
<hr />
<a
href="https://www.google.com/search?q=bing&oq=bin&gs_lcrp=EgZjaHJvbWUqEggBEAAYQxiDARixAxiABBiKBTIGCAAQRRg5MhIIARAAGEMYgwEYsQMYgAQYigUyGAgCEC4YQxiDARjHARixAxjRAxiABBiKBTIPCAMQABhDGLEDGIAEGIoFMg0IBBAAGIMBGLEDGIAEMg0IBRAAGIMBGLEDGIAEMg8IBhAAGEMYsQMYgAQYigUyEAgHEAAYgwEYsQMYgAQYigUyDQgIEAAYgwEYsQMYgAQyEAgJEAAYgwEYsQMYgAQYigXSAQgyMzA5ajBqN6gCALACAA&sourceid=chrome&ie=UTF-8">bing</a>
<nav>
<a href="https://www.google.com/">google</a>
</nav>
<a href="https://www.google.com/">GOOGLE</a>
<nav>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur
beatae porro obcaecati ipsum deserunt modi omnis consequuntur illum
corrupti nulla!
</p>
</nav>
</body>
</html>
difference between pseudo class and elements:
| Pseudo-classes | Pseudo-elements |
| Target elements based on their state or behavior | Generate additional content or style specific parts of an element |
| One colon (:) followed by the pseudo-class name | Two colons (::) followed by the pseudo-element name |