Commonly used CSS3 selectors
:nth-child(an+b)
Purpose: Selects all child elements of a type in a specific ordinal position within a parent element, counting from the first child element.
Syntax: :nth-child(an+b), where a and b are integers and n is a non-negative integer index. Expresses a variety of positional patterns, such as:
- :nth-child(n): Selects all child elements.
- :nth-child(odd) or :nth-child(even): Selects child elements in odd or even positions.
- :nth-child(3n): Selects every third child element.
- :nth-child(2n+1): Selects all child elements in odd positions.
- :nth-child(5n-2): Selects every fifth child element, starting from the third.
:nth-last-child(an+b)
Purpose: Select all child elements of the same type in a specific ordinal position within the parent element, but count backwards from the last child element.
Syntax: :nth-last-child(an+b), the syntax and meaning are the same as :nth-child(), but the counting direction is reversed.
:nth-of-type(an+b)
Purpose: Select child elements of the same type in a specific ordinal position within the parent element, counting from the first child element of the same type.
Syntax: :nth-of-type(an+b), the syntax and meaning are the same as :nth-child(), but limited to elements of the same type.
:nth-last-of-type(an+b)
Purpose: Select child elements of the same type in a specific ordinal position within the parent element, but count backwards from the last child element of the same type.
Syntax: :nth-last-of-type(an+b), the syntax and meaning are the same as :nth-of-type(), but the counting direction is opposite.
/* Select the third li element from the end of the list */
li:nth-last-child(3) {
background-color: orange;
}
/* Select the second paragraph element before the last paragraph element in the div */
div p:nth-last-of-type(2) {
font-weight: bold;
}
/* Select the third even-numbered img element from the last one among all img elements */
img:nth-last-of-type(2n+1) {
border: 1px solid black;
}:not()
Purpose: Selects all elements that do not match the specified selector.
Syntax: :not(selector), where selector is any valid CSS selector.
/* Select all non-div elements */
:not(div) {
color: red;
}
/* Select unchecked checkboxes */
input[type="checkbox"]:not(:checked) {
opacity: 0.5;
}:checked
Purpose: Selects all checked form input elements, such as checkboxes (<input type="checkbox">) and radio buttons (<input type="radio">).
/* Add borders to selected checkboxes */
input[type="checkbox"]:checked {
border: 1px solid blue;
}:disabled
Purpose: Select all disabled form elements, such as <input>, <select>, <textarea>, etc.
/* Add gray text to disabled buttons */
button:disabled {
color: gray;
}:empty
Purpose: Select elements with no child elements (including text nodes).
/* Add hint text to empty paragraphs */
p:empty::before {
content: "This paragraph is empty.";
color: darkred;
}:enabled
Purpose: Select all enabled form elements, opposite to :disabled.
/* Add borders to enabled input boxes */
input:enabled {
border: 1px solid green;
}:first-of-type
Purpose: Select the first child element of its type within the parent element.
/* Add background color to the first paragraph */
p:first-of-type {
background-color: lightblue;
}:last-of-type
Purpose: Select the last child element of its type within the parent element.
/* Add underline to the last paragraph */
p:last-of-type {
text-decoration: underline;
}:only-child
Purpose: Select elements that do not have any sibling elements.
/* Add vertical spacing to elements that occupy a single line */
.container > :only-child {
margin-top: 20px;
margin-bottom: 20px;
}:only-of-type
Purpose: Select elements that have no sibling elements of the same type.
/* Add bold to the only paragraph element */
.content > p:only-of-type {
font-weight: bold;
}:required
Purpose: Select form elements with the required attribute.
/* Add a red asterisk to required fields */
input:required::after {
content: "*";
color: red;
}:optional
Purpose: Select form elements that do not have the required attribute.
/* Add a gray question mark to non-required fields */
input:optional::after {
content: "?";
color: gray;
}::before
Purpose: Insert generated content (usually defined by the content attribute) at the beginning of the element content and style it.
/* Add blue quotes before each paragraph */
p::before {
content: '"';
color: blue;
font-size: 24px;
}::after
Purpose: Insert generated content (usually defined by the content attribute) at the end of the element content and style it.
/* Add red quotes after each paragraph */
p::after {
content: '"';
color: red;
font-size: 24px;
}::first-letter
Purpose: Select the first letter in the element (which may include multiple characters, such as hyphens, apostrophes, etc. that form a visual whole with the first letter) and apply styles to it separately.
/* Add capital letters and special colors to the first letter of each paragraph */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #333;
}::first-line
Purpose: Select the first line of text in an element and apply styles to it separately.
/* Add special fonts and colors to the first line of each paragraph */
p::first-line {
font-family: 'Georgia', serif;
color: #999;
}::selection
Purpose: Select the range of text currently selected by the user (i.e., mouse drag or keyboard selection) and apply styles to it.
/* Set the background color and text color of the selected text */
::selection {
background-color: rgba(0, 128, 255, 0..jpg);
color: white;
}:target
Purpose: Select the element whose current URL fragment identifier (fragment identifier, the part after # in the URL) matches the element’s id attribute.
<div id="section1">
<h2>Section 1</h2>
<!-- content... -->
</div>
<div id="section2">
<h2>Section 2</h2>
<!-- content... -->
</div>
<ul>
<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
</ul>/* When the URL contains #sectionX, highlight the corresponding section */
:target {
background-color: lightyellow;
border-left: 5px solid #333;
}:any-link
Purpose: Select all unvisited and visited links (<a> elements), which is a shorthand selector, equivalent to the combination of :link, :visited.
/* Add underline to all links */
:any-link {
text-decoration: underline;
}:link
Purpose: Select all unvisited links (<a> elements whose href attribute is not empty and has not been clicked by the user).
/* Unvisited links use blue */
:link {
color: blue;
}:visited
Purpose: Select all visited links (<a> elements that the user has clicked and the browser has recorded the visit history).
/* Visited links use purple */
:visited {
color: purple;
}
