A Guide to CSS Pseudo-Selectors: How to Style Beyond Elements
web
25 October 2024In CSS, pseudo-selectors (often referred to as pseudo-classes and pseudo-elements) allow you to apply styles based on the state, structure, or specific parts of an element without adding additional HTML markup. These powerful selectors enhance control over styling, helping create more interactive and responsive designs. Let’s dive into a comprehensive guide on CSS pseudo-selectors and explore how they can upgrade your styling toolkit.
1. Pseudo-Classes
Pseudo-classes target specific states of elements, like when a user hovers over an element or when a link has been visited.
Code
1/* Structural Pseudo-Classes */
2p:first-child {
3 font-weight: bold; /* Styles the first child paragraph */
4}
5
6p:last-child {
7 color: red; /* Styles the last child paragraph */
8}
9
10li:nth-child(2) {
11 font-style: italic; /* Styles the second item in a list */
12}
13
14li:nth-last-child(1) {
15 color: blue; /* Styles the last item in a list from the end */
16}2. Pseudo-Elements
Pseudo-elements target specific parts of an element's content, enabling fine-grained styling.
Code
1/* Pseudo-Elements */
2p::before {
3 content: "→ "; /* Adds arrow before paragraph */
4 color: gray;
5}
6
7p::after {
8 content: " ←"; /* Adds arrow after paragraph */
9 color: gray;
10}
11
12p::first-letter {
13 font-size: 2em; /* Enlarges the first letter */
14 color: darkblue;
15}
16
17p::first-line {
18 font-weight: bold; /* Styles the first line of text */
19}3. Dynamic Content Pseudo-Classes
These pseudo-classes help tailor designs based on dynamic states or content structure.
Code
1/* Dynamic Content Pseudo-Classes */
2input[type="checkbox"]:checked {
3 background-color: green; /* Styles checked checkbox */
4}
5
6button:disabled {
7 opacity: 0.5; /* Styles disabled button */
8}
9
10button:enabled {
11 cursor: pointer; /* Styles enabled button */
12}4. Link-Related Pseudo-Classes
Link pseudo-classes offer specialized styling options for hyperlinks based on user interaction.
Code
1/* Link-Related Pseudo-Classes */
2a:link {
3 color: blue; /* Styles unvisited links */
4}
5
6a:visited {
7 color: purple; /* Styles visited links */
8}
9
10a:hover {
11 color: orange; /* Styles links on hover */
12}
13
14a:active {
15 color: red; /* Styles links when clicked */
16}