Pseudo Classes
CSS pseudo-classes are special selectors that allow you to target elements based on their state or position in the DOM. They can be used to style elements that are in a certain state, such as being hovered over, being active, or being the target of a link. They are an important part of CSS and are used to create dynamic styling on a page.
CSS pseudo-classes are an important part of CSS and are used to create dynamic styling on a page. They allow you to target elements based on their state or position in the DOM and can be used to create interesting effects and interactions on a page.
Selector: Pseudoclasses {
…
}
:hover
The most common pseudo-class is the :hover
pseudo-class, which allows you to style an element when it is being hovered over by the user. This is usually used to change the color or background of an element when the user’s mouse is over it.
When the mouse is placed on an element, this class suspicion is activated.
a:hover {
color: red;
}
Hover Me
:link
Used to select and style unvisited links.
a:link {
color: aqua;
}
:visited
The :visited
pseudo-class is used to style a link differently when it has already been visited by the user. This is often used to make visited links appear differently than unvisited links.
a:visited {
color: red;
}
:active
The :active
pseudo-class is used to style an element when it is being clicked or tapped on. This is often used to create a “pressed” effect on a button when it is being clicked.
a:active {
color: blue;
}
:nth-child
The :nth-child
pseudo-class is used to target a specific child element of a parent element. This can be used to style a specific item in a list differently than the other items.
The selector allows you to select one or more elements based on their source order, according to a formula.
/* Select the 3th list item */
li: nth-child(3) { }
/* Select every other list item starting with first */
li: nth-child(odd) { }
/* Select every 3rd list item starting with first */
li: nth-child (3n - 2) { }
/* Select every 3rd child item, as long as it has class "el" */
.el: nth-child(3n) { }
:first child
The :first-child
and :last-child
pseudo-classes are used to target the first and last child elements of a parent element. This is useful for styling the first or last item in a list differently than the other items.
li:first-child {
background: yellow;
}
:last child
Used to Select and style every last child of parent.
li:last-child {
background: red;
}
:Not()
The :not
pseudo-class is used to target elements that do not match a specific selector. This is useful for targeting elements that are not of a certain type or that do not have a certain class.
Set a color for all elements that are not a <ul>
element:
:not(ul) {
color: #ff0000;
}
:Lang()
The :lang()
pseudo-class selector in CSS matches elements based on the context of their given language attribute. Set background for any <p>
element with lang="en"
attribute.
p:lang(en) {
color: yellow;
}
:focus
The :focus
pseudo-class is used to style an element when it is in focus. This is usually used to highlight an input field or button when the user is focused on it.
This CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.
input:focus {
background-color: green;
}
:first-letter
It is a pseudo-element that selects the first letter in the first line of a block-level element (such as a paragraph <p>
), if that letter is not preceded by any other content (such as images or inline tables) on its line.
p:first-letter {
font-size: 24px;
}
:after
The CSS :after selector allows you to add content after a selected element. (use in css3).
p:after {
content: "end";
}
This is paragraph1.
:before
The CSS :before
selector allows you to add content before a selected element. (use in css3)
p:before {
content: "Start";
}
This is paragraph1.
Here is paragraph2.
::after and ::before
These are like :after
and :before
but these work in CSS version 2.