Table of contents
No headings in the article.
pseudo-class 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.They tend to act as if you had applied a class to some part of your document, often helping you cut down on excess classes in your markup, and giving you more flexible, maintainable code. Pseudo-classes are keywords that start with a colon:
:pseudo-class-name
:first-child we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add CSS to that class.
.first {
font-size: 120%;
font-weight: bold;
}
:last-child The :last-child CSS pseudo-class represents the last element among a document.
p:last-child {
color: lime;
background-color: black;
padding: 5px;
}
:only-child The :only-child CSS pseudo-class represents an element without any siblings.
li:only-child {
color: fuchsia;
}
:hover The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it.
a:hover {
background-color: gold;
}
:focus The :focus CSS pseudo-class represents an element when the user clicks or taps on an element or selects it with the keyboard's Tab key.
input:focus {
background-color: lightblue;
}
pseudo-element They act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon :: .
::pseudo-element-name
::before It allow you to insert “content” before any non-replaced element.
.box::before {
content: "This should show before the other content."
}
::after It allow you to insert “content” after any non-replaced element.
.box::after {
content: " ➥"
}