.png)
Mobiprep has created last-minute notes for all topics of Pseudo-Class to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on Pseudo-Class.
Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.
Pseudo-Class
Question 1 - Explain Pseudo class with example.
Answer - A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer.
A pseudo-class is used to define a special state of an element. For example, it can be used to:
Style an element when a user mouses over it.
Style visited and unvisited links differently.
Style an element when it gets focus
Syntax-
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}A CSS pseudo-element is a keyword added to a selector that lets you style aspecific part of the selected element(s).
Question 2 - Explain the hover pseudo class in detail.
Answer - hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
Example-
div:hover {
background-color:blue;
}
Hover over a <div> element to show a <p> element (like a tooltip):
):p {
display: none;
background-color:yellow;
padding: 20px;
}
div:hover p {
display: block;
}Question 3- Explain CSS Pseudo Elements in detail.
Answer - pseudo-element is used to style specified parts of an element.
For example, it can be used to:
Style the first letter, or line, of an element.
Insert content before, or after, the content of an element
Syntax-
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}The ::first-line Pseudo-element-
The ::first-line pseudo-element is used to add a special style to the first line of a text.
The following example formats the first line of the text in all <p> elements:
Example
p::first-line {
color: #ff0000;
font-variant: small-caps;
}The following properties apply to the ::first-line pseudo-element:
font properties
color properties
background properties word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height clear
The ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The following example formats the first letter of the text in all <p> elements:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}The following properties apply to the ::first-letter pseudo- element:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
CSS -The ::before Pseudo-element-
The ::before pseudo-element can be used to insert some content before the content of an element.
CSS - The ::after Pseudo-element-
The ::after pseudo-element can be used to insert some content after the content of an element.
CSS - The ::selection Pseudo element-
The ::selection pseudo-element matches the portion of an element that is selected by a user. The following CSS properties can be applied to ::selection: color, background, cursor, and outline.