Pseudo Classes
A pseudo-class is used to define a special state of an element.
Selector: Pseudoclasses {
…
}
:hover
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
Used to Select and style visited links.
a:visited {
color: red;
}
:active
Used to select and style the active link.
a:active {
color: blue;
}
:nth-child
The :nth-child
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
Used to Select and style every first child of parent.
li:first-child {
background: yellow;
}
:last child
Used to Select and style every last child of parent.
li:last-child {
background: red;
}
:Not()
This selector represents elements that do not match a list of selectors. 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
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.