7.1 State Pseudo-classes
Pseudo-classes in CSS are special keywords added to selectors to specify the state of an element or its position in the document structure. They let you apply styles to elements in certain states or situations that can't be specified using regular selectors.
Main pseudo-classes:
- State pseudo-classes
- Structural state pseudo-classes
- Form pseudo-classes
- Navigation pseudo-classes
Syntax:
selector:pseudo-class {
property: value;
property: value;
}
State pseudo-classes
These pseudo-classes are used to style elements based on their current state, like when hovering or being active:
:hover— applied when a user hovers over an element:active— applied when an element is activated (usually on click):focus— applied when an element is focused (e.g., using the keyboard):visited— applied to visited links:link— applied to unvisited links
7.2 Hover Pseudo-class
The :hover pseudo-class is applied to an element when a user hovers over it with the mouse pointer.
It's often used to change the appearance of links and buttons on hover.
Syntax:
selector:hover {
property: value;
property: value;
}
Example:
This selector changes the text color and underlines links when the mouse pointer hovers over them.
<a href="#">Placeholder Link</a>
a:hover {
color: red;
text-decoration: underline;
}
Usage:
- Enhances user interaction (UI) by providing visual feedback
- Used for buttons, links, and other interactive elements
7.3 Focus Pseudo-class
The :focus pseudo-class is applied to an element when it gains focus. For example, when clicking on it or navigating
to it using the tab key. It's mostly used for inputs and other form elements.
Syntax:
selector:focus {
property: value;
property: value;
}
Example:
This selector changes the input border color and removes the outline when the input is focused.
<input type="text" name="text" id="text">
input:focus {
border-color: blue;
outline: none;
}
Usage:
- Improves accessibility of web pages
- Makes interactive elements more noticeable when focused
7.4 nth-child Pseudo-class
The :nth-child pseudo-class targets elements based on their position among siblings.
It takes an argument that can be a number, keyword, or expression.
Syntax:
selector:nth-child(n) {
property: value;
property: value;
}
Example:
This selector applies styles to elements based on their position among siblings.
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 7</li>
</ul>
/* Styles all odd children */
li:nth-child(odd) {
background-color: lightgray;
}
/* Styles all even children */
li:nth-child(even) {
background-color: lightblue;
}
/* Styles the second child */
li:nth-child(2) {
color: red;
}
Usage:
- Styles table rows, list items, and other repeating structures
- Allows creating complex layouts and styling without adding extra classes
7.5 Examples of Using Pseudo-classes
<button type="button">Button</button>
button:hover, button:focus {
background-color: darkblue;
color: white;
}
Styling even table rows:
<table>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Product 1</td>
<td>5</td>
<td>10 units</td>
</tr>
<tr>
<td>Product 2</td>
<td>3</td>
<td>15 units</td>
</tr>
<tr>
<td>Product 3</td>
<td>8</td>
<td>7 units</td>
</tr>
</table>
tr:nth-child(even) {
background-color: #f2f2f2;
}
Excluding certain elements from general style:
<ul>
<li class="list-item">Element 1</li>
<li class="list-item">Element 2</li>
<li class="list-item">Element 3</li>
<li class="list-item">Element 4</li>
<li class="list-item">Element 5</li>
<li class="list-item">Element 6</li>
<li class="list-item">Element 7</li>
</ul>
.list-item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
GO TO FULL VERSION