Pseudo-classes and Pseudo-elements
Pseudo class and pseudo-element in HTML web page development design are special web page tag element tag selector type method in CSS scripting that provides HTML web developer custom modification features to specific web page control element based on the desired web page elements as per the particular requirement condition where you can manually apply styles and attributes to individual pseudo class and pseudo-element objects.
So let’s get to know css pseudo class and pseudo-element better.
Pseudo class in css.
Use of pseudo class selector in HTML web page through CSS to control and define the particular condition of a particular web page tag element. Pseudo classes control and manage individual web page objects, allowing a web developer to customize them according to particular conditions and logic.
Common pseudo-classes in CSS.
When a web visitor hovers over a web page element named p, it applies a hover color to that object.
Hover pseudo class example.
p:hover {
color: yellow; /* it used to apply paragraph color when you hover on them */
}
When a web developer or web visitor clicks a button, the hover color of that button displays in the background.
Button Hover pseudo class example.
button:active {
background-color: orange; /* display button hover color when user click manually */
}
When a web visitor focuses on an input field in a web page element, it applies a lime color to the selected element and displays it.
Input pseudo class example.
input:focus {
outline: 4px lime; /* it display the lime outline on input focus element */
}
Selects the first child element of a web page parent element in an HTML web page.
Parent child pseudo class example.
p:second-child {
font-weight: bold; /* used to display second paragraph text bold */
color: red;
}
[n]
Selects the nth child element of a web page parent element in an HTML web page, where n in the class selection can be a number, a user-defined keyword, or a particular custom formula.
n pseudo class example.
li:nth-child(3) {
font-family: arial;
color: red; /* apply the 3rd list item with red color */
}
Selector Selects class elements in the current HTML web page that do not match the selector in a particular class.
Div selector example in css.
div:not(.test) {
background-color: aqua; /* it used to apply css style on all dive , it exclude only test class */
}
Pseudo-elements in CSS.
Pseudo-elements in HTML help web developers apply custom styles and attributes to specific portions of a particular element on a web page. You can use pseudo-elements to custom edit any element on a web page and preview the styles and attributes.
css common pseudo-element type.
::before pseudo-element.
Adds or displays custom information before the content of a particular element in an existing HTML web page.
Before pseudo-element example.
h2::before {
content: “This Information Add Before h2 tag “; /* it used to display some custom h2 heading text */
color: red;
}
::after pseudo-element.
In an HTML web page, the after pseudo-element helps you to display or add particular information after a web page element.
after pseudo-element example.
p::after {
content: ” (Click Explore to more)”; /* it used to add after paragraph content information */
}
::first-line pseudo-element.
Apply bold and red color CSS style attributes to the first line of the first block of paragraph text in the current HTML web page.
::first-line pseudo-element example.
p::first-line {
font-weight: bold; /* used to display paragraph first line text bold and apply red color */
color: red;
}
::first-letter pseudo-element.
The first letter of the current HTML web page applies styles and attributes to the first character of a block of text.
::first-letter pseudo-element example.
p::first-letter {
font-size: 1.5em; /* display first character 1.5 font size */
float: left; /* display float first line character to left */
margin-right: 10px; /* add margin right with 10px */
}
Example of pseudo-classes and pseudo-elements in HTML web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Css Pseudo-Classes and Pseudo-Elements Script Code</title>
<style>
a {
text-decoration: auto;
color: lime;
}
a:hover {
color: pink; /* used to display link pink hover color */
}
p::first-line {
font-size:1.5em;
font-weight: bold; /* display first line of paragraph with css attributes */
}
p::before {
content: “Info -: “; /* it used to display content before paragraph */
color: red;
}
button:active {
background-color: aqua; /* used to button active color */
}
</style>
</head>
<body>
<h1>Pseudo-elements And Pseudo-class</h1>
<p>Lets Explore pseudo-elements and pseudo-classes in css.</p>
<a href=”https://vcanhelpsu.com/”>Click To Hover link</a>
<br>
<button>Lets Test</button>
</body>
</html>
Explanation of pseudo-classes and pseudo-elements
- css pseudo-classes – In any HTML web page, custom styles and attributes can be applied to a particular element based on a particular condition, such as :hover, :focus, etc. CSS pseudo class elements are.
- css pseudo-elements – Custom edit and style a specific portion of a particular element in an existing HTML web page (e.g., ::before, ::first-line), etc. Custom CSS pseudo-elements.
