CSS `nth-child` illustration page with detailed comments and samples:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS nth-child Illustration</title>
<style>
/* General styling for the container and list items */
.container {
width: 300px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #f0f0f0;
text-align: center;
}
/* Highlight the first child */
li:nth-child(1) {
background-color: #ffdddd; /* Light red background */
}
/* Highlight every second child */
li:nth-child(2n) {
background-color: #ddffdd; /* Light green background */
}
/* Highlight every third child */
li:nth-child(3n) {
background-color: #ddddff; /* Light blue background */
}
/* Highlight the second child */
li:nth-child(2) {
background-color: #ffdd99; /* Light orange background */
}
/* Highlight every 2nd child starting from the third */
li:nth-child(2n+1) {
background-color: #99ddff; /* Light cyan background */
}
/* Highlight children from the 3rd to the 6th */
li:nth-child(n+3):nth-child(-n+6) {
background-color: #dd99ff; /* Light purple background */
}
</style>
</head>
<body>
<div class="container">
<h2>CSS nth-child Illustration</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>
</body>
</html>
```
### Explanation:
1. **General Styling**:
- The container is centered with a width of 300px.
- The list items have no default bullets (`list-style-type: none`), padding of `10px`, margin of `5px 0`, and a light grey background color (`#f0f0f0`).
2. **Specific nth-child Selectors**:
- `li:nth-child(1)`: Highlights the first child with a light red background.
- `li:nth-child(2n)`: Highlights every second child with a light green background.
- `li:nth-child(3n)`: Highlights every third child with a light blue background.
- `li:nth-child(2)`: Specifically highlights the second child with a light orange background.
- `li:nth-child(2n+1)`: Highlights every odd-numbered child (1, 3, 5, ...) with a light cyan background.
- `li:nth-child(n+3):nth-child(-n+6)`: Highlights children from the 3rd to the 6th with a light purple background.
### Result:
You will see the following results:
- The first item is light red.
- The second item is light orange.
- Every second item (2, 4, 6, 8, 10) is light green.
- Every third item (3, 6, 9) is light blue.
- Every odd item (1, 3, 5, 7, 9) is light cyan.
- Items 3 to 6 (inclusive) are light purple.
Odd/Even
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS nth-child Example with Table</title>
<style>
/* General styling for the table */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
/* Highlight even rows */
tr:nth-child(even) {
background-color: #f2f2f2; /* Light grey background */
}
/* Highlight odd rows */
tr:nth-child(odd) {
background-color: #e6f7ff; /* Light blue background */
}
/* Highlight every 3rd row */
tr:nth-child(3n) {
background-color: #ffe6e6; /* Light red background */
}
/* Highlight specific rows from 4th to 6th */
tr:nth-child(n+4):nth-child(-n+6) {
background-color: #d9f2d9; /* Light green background */
}
</style>
</head>
<body>
<div class="container">
<h2>CSS nth-child Example with Table</h2>
<table>
<thead>
<tr>
<th>Item</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Description for Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Description for Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Description for Item 3</td>
</tr>
<tr>
<td>Item 4</td>
<td>Description for Item 4</td>
</tr>
<tr>
<td>Item 5</td>
<td>Description for Item 5</td>
</tr>
<tr>
<td>Item 6</td>
<td>Description for Item 6</td>
</tr>
<tr>
<td>Item 7</td>
<td>Description for Item 7</td>
</tr>
<tr>
<td>Item 8</td>
<td>Description for Item 8</td>
</tr>
<tr>
<td>Item 9</td>
<td>Description for Item 9</td>
</tr>
<tr>
<td>Item 10</td>
<td>Description for Item 10</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Contact us for software training, education or development
.png)
0 Comments