Preface
A CSS pseudo-class is a CSS selector that allows selecting a specific state or position in a document. They are used to select elements in different states without changing the content of the HTML markup. A pseudo-class begins with a colon (:), followed by the name of the pseudo-class. They are used in conjunction with selectors to define styles that are applied under specific conditions. The main function of pseudo-classes is to allow developers to select elements based on user interaction, document structure, or other conditions, thereby achieving more dynamic and interactive styles.
1. Structural pseudo-classes:
1. :first-child: Select the first child element under the parent element
Selects the first child element under the parent element.
li:first-child {
color: red;
}
2. :last-child: Select the last child element under the parent element
Selects the last child element under the parent element.
li:last-child {
color: blue;
}
3. :nth-child(n): Select the nth child element under the parent element
Select the nth child element under the parent element.
li:nth-child(odd) {
background-color: #f2f2f2;
}
4. :nth-last-child(n): Count from the last child element and select the nth child element
Counting from the last child element, select the nth child element.
li:nth-last-child(2) {
font-weight: bold;
}
5. :nth-of-type(n): Select the nth element among sibling elements of the same type
Selects the nth element among its siblings of the same type.
p:nth-of-type(2n) {
color: green;
}
6. :nth-last-of-type(n): Count from the last sibling element of the same type and select the nth element
Count from the last sibling element of the same type and select the nth element.
p:nth-last-of-type(odd) {
text-decoration: underline;
}
7. :first-of-type: Select the first element among sibling elements of the same type
Selects the first element among siblings of the same type.
h2:first-of-type {
font-size: 24px;
}
8. :last-of-type: Select the last element among sibling elements of the same type
Selects the last element among sibling elements of the same type.
span:last-of-type {
border: 1px solid #ccc;
}
9. :only-child: Selects the element that is the only child element of its parent element
Selects an element that is the only child element of its parent.
div:only-child {
background-color: yellow;
}
10. :only-of-type: Selects elements that are the only child elements of a specific type among their parent elements
Selects elements that are the only child elements of a specific type among their parent elements.
p:only-of-type {
color: purple;
}
2. Functional pseudo-classes:
1.:not(selector): Select elements that do not match the given selector
Selects elements that do not match the given selector.
input:not([type=“submit”]) {
border: 1px solid #999;
}
3. Interface status pseudo-class:
1. :hover: The style applied when the mouse is hovering
Style to apply on mouseover.
a:hover {
color: orange;
}
2. :active: The style applied when the element is activated
Style applied when the element is activated (for example, a button is pressed).
button:active {
background-color: #ccc;
}
3. :focus: The style applied when the element gains focus
Style applied when an element receives focus, typically used with form elements.
input:focus {
border: 2px solid blue;
}
4. Interface structure pseudo-class:
1. :target: Select the currently active target element
Selects the currently active target element, typically used with in-page links (anchors).
#section1:target {
background-color: lightyellow;
}
5. Link pseudo-classes:
1. :link: Select a link that has not been visited
Select links that have not been visited.
a:link {
color: blue;
}
2. :visited: Select a link that has been visited
Select a link that has been visited.
a:visited {
color: purple;
}
6. Dynamically changing pseudo-classes:
1. :focus-within: Select the element containing the focused element
Selects the element containing the focused element.
form:focus-within {
border: 2px solid #555;
}
7. Form pseudo-classes:
1. :checked: Select the selected form element
Selects a selected form element, such as a checkbox or radio button.
input[type=“checkbox”]:checked {
border-color: green;
}
2. :disabled: Select disabled form elements
Select disabled form elements.
input:disabled {
background-color: #eee;
}
3. :enabled: Select enabled form elements
Select an enabled form element.
input:enabled {
background-color: #fff;
}
8. Other pseudo-categories:
1. :empty: Select elements that have no child elements
Selects elements that have no child elements.
p:empty {
display: none;
}
2. :is(): Selector matches elements, analogous to combined selectors
Usage: :is(selector) or :matches(selector)
Example: Select all paragraph and heading elements where at least one has the class name "important".
The :is() pseudo-class allows you to combine multiple selectors so that as long as at least one of them matches an element, the entire selector matches. This helps simplify complex selectors and improves code readability.
:is(p, h1, h2, h3):is(.important)
3. :where(): Selector matches elements, low priority
Usage: :where(selector) or :matches(selector)
Example: Select all paragraph and heading elements where at least one has the class name "important".
:where() is similar to :is() and allows combining multiple selectors. Unlike :is(), :where() does not affect specificity, so it is more suitable for improving the readability of code without introducing additional specificity.
:where(p, h1, h2, h3):where(.important)
4. :has(): selector matches elements
Usage: :has(selector)
Example: Select all div elements that contain at least one child element with the class name "highlight".
The :has() pseudo-class is used to select elements that contain specific descendants. If the specified selector matches the element's descendants, then elements containing those descendants will be selected. This is useful when you need to select the parent element containing specific content.
div:has(.highlight)
5. :matches(): Multiple conditions support
: matches() multiple conditions support: allows multiple conditions to be matched in one selector at the same time, similar to a comma-separated selector list, but more flexible.
p:matches(:hover, :active) {}
Classic case analysis
Add prefix/suffix
The most common technique for pseudo-elements is to use ::before and ::after pseudo-elements to add prefix or suffix to an element, such as a simple DOM structure:
<div className="error-message">系统异常，请稍后再试</div>
After applying the following CSS styles:
.error-message {
position: relative;
color: #666666;
padding: 12px 30px;
background-color: #FFECE4;
border-radius: 5px;
}
.error-message::before {
content: '';
background-image: url('/public/icon-error.svg');
background-size: 15px;
position: absolute;
left: 10px;
display: inline-block;
width: 15px;
height: 15px;
}
The following effects can be obtained:
Note: When creating ::before and ::after elements, you must set the content attribute, otherwise it will not exist. In addition, don't forget to set the position of the host element to relative or absolute, otherwise the layout may be messed up.
Although using two left and right elements to layout can also achieve the above effect, the advantage of pseudo elements is that only one element needs to be created. A similar scenario involves adding a red require asterisk in front of the input box.
message bubble
We all encounter message dialog boxes with arrows when chatting, as shown in the figure below:
It is also very simple to implement the above layout, also using ::before and ::after pseudo-elements, HTML structure:
<div className="container">
<div className="box top-arrow">Top </div>
<div className="box right-arrow">Right</div>
<div className="box bottom-arrow">Bottom</div>
<div className="box left-arrow">Left</div>
</div>
CSS code:
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
}
.box {
width: 150px;
height: 100px;
background-color: red;
color: white;
position: relative;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
.box::after {
content: '';
width: 0;
height: 0;
position: absolute;
}
.box.bottom-arrow::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 12px solid red;
left: 22px;
top: -10px;
}
.box.right-arrow::after {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid red;
top: 22px;
left: -10px;
}
.box.left-arrow::after {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid red;
top: 22px;
right: -10px;
}
.box.top-arrow::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid red;
left: 22px;
bottom: -10px;
}
zebra stripe effect
In a list, display different colors for odd-numbered rows and even-numbered rows. The effect is as follows:
HTML structure:
<div class="container">
<div>第1行</div>
<div>第2行</div>
<div>第3行</div>
<div>第4行</div>
<div>第5行</div>
<div>第6行</div>
</div>
CSS style:
.container {
width: 200px;
margin: 50px auto;
border: 1px solid antiquewhite;
}
.container div {
padding: 5px;
}
.container div:nth-child(even) {
background-color: antiquewhite;
}
floating highlight effect
When shopping on an e-commerce website, when the user hovers the mouse over the current product, it is highlighted by enlarging the size and adding a shadow:
HTML structure:
<div class="container">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>
CSS style:
body {
margin: 0;
background-color: rgb(245, 245, 245);
}
.container {
height: 200px;
width: 360px;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.product {
width: 100px;
height: 100px;
background: white;
background-image: url(//cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png?thumb=1&w=400&h=400&f=webp&q=90);
background-size: cover;
}
.product:hover {
box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
transform: translate3d(0, -5px, 0) scale(1.2);
cursor: pointer;
}
Custom checkbox style
The default checkbox is relatively monotonous. Using pseudo-classes and pseudo-elements, you can customize the checkbox style. The effect is as follows:
HTML structure:
<div className="container">
<div>
<input type="checkbox" id="backend" />
<label htmlFor="backend">后端开发</label>
</div>
<div>
<input type="checkbox" id="backend" />
<label htmlFor="backend">后端开发</label>
</div>
<div>
<input type="checkbox" id="frontend" />
<label htmlFor="checkbox">前端开发</label>
</div>
<div>
<input type="checkbox" id="frontend" />
<label htmlFor="checkbox">前端开发</label>
</div>
</div>
CSS style:
input[type="checkbox"] {
margin: 0;
}
#frontend {
opacity: 0;
}
#frontend+label {
margin-left: -12px;
pointer-events: none;
}
#frontend+label::before {
content: '\a0';
display: inline-block;
vertical-align: 0.1em;
width: 0.8em;
height: 0.8em;
border-radius: 0.2em;
background-color: silver;
text-indent: 0.15em;
line-height: 0.65;
cursor: pointer;
}
#frontend:checked+label::before {
content: '\2713';
background-color: yellowgreen;
}
Custom scroll bar style
The browser's built-in scroll bar style is very simple and not beautiful enough. We can use pseudo-elements and pseudo-classes to customize a scroll bar, change its background color to light gray, and its width to 6px. When the mouse is hovered up, the width becomes 10px. .
HTML structure:
<div class="container">
<div class="rect">
<div class="box"></div>
</div>
<div class="rect2">
<div class="box"></div>
</div>
</div>
CSS style:
.container {
display: flex;
justify-content: space-around;
}
.rect,
.rect2 {
width: 200px;
height: 200px;
overflow: scroll;
border: 1px solid gainsboro;
}
.rect2::-webkit-scrollbar {
width: 10px;
height: 0;
background-color: transparent;
}
.rect2::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.08);
border-left: 4px solid transparent;
background-clip: padding-box;
}
.rect2::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.08);
border: 0;
}
.box {
width: 100px;
height: 300px;
background-color: aliceblue;
}
Comes with 250 sets of selected project source codes
Source code
screenshot
Source code acquisition:
Follow the public account "Coder Park" and reply [source code] to get the full set of source code download links
