HTML unit 2-3
Pseudo-classes:-
HTML pseudo-classes are used in CSS to select elements based on their state or a characteristic that's not inherent in the element. For example, you might want to select a link that has been visited or select an input element that is currently being hovered over with a mouse. Some common pseudo-classes include:
:hover: Selects an element when the user hovers over it with a mouse.:active: Selects an element that is being activated, such as a button that is being clicked.:focus: Selects an element that has focus, such as an input field that has been selected for typing.:visited: Selects a link that has been visited.:first-child: Selects an element that is the first child of its parent element.:last-child: Selects an element that is the last child of its parent element.:nth-child(n): Selects an element that is the nth child of its parent element.
Pseudo-classes are used in CSS in conjunction with selectors to apply specific styles to certain elements. For example, the following code would change the color of a link to red when it's being hovered over:
code:01
<html>
<head>
<style>
/* Selects the link when it's being hovered over */
a:hover {
color: red;
}
/* Selects the button when it's being clicked */
button:active {
background-color: yellow;
}
/* Selects the input field when it has focus */
input:focus {
border: 2px solid blue;
}
/* Selects the visited link */
a:visited {
color: green;
}
/* Selects the first child of the parent element */
li:first-child {
font-weight: bold;
}
/* Selects every 3rd child of the parent element */
li:nth-child(3) {
background-color: lightgray;
}
</style>
</head>
<body bgcolor="lightpink">
<a href="#">This is a link</a>
<br>
<button>Click me</button>
<br>
<input type="text">
<br>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
output:-images-01-1, 01-2, 01-3,01-4.
open browser only to see the color patterns
i move to link change the color to red but i cannot click the link
I click the link color change to green
write the search bar item 1 and i click the button(click me) the color will be change to the yellow
Pseudo-Elements:-
<html>
<head>
<style>
.example::before {
content: "Before ";
color: blue;
}
.example::after {
content: " After";
color: blue;
}
.example p::first-letter {
font-size: 200%;
color: green;
}
.example p::first-line {
font-weight: bold;
color: red;
}
::selection {
background: yellow;
}
</style>
</head>
<body>
<div class="example">
<p>This is a sample text.</p>
</div>
</body>
</html>
output:-images02-1,02-2.
open browser only to see the color patterns
image-02-1
I drag the or select all the browser page color change to text
image-02-2
Comments
Post a Comment