The :nth-of-type() pseudo-class selects an element according to its position among sibling elements of the same type. Its argument can be a number, a keyword such as even, or a pattern such as n+3. section 8.2.4 section 8.6
Use positional patterns to style meaningful parts of a checkout table:
- Select the second cell in every body row with tbody td:nth-of-type(2). section 8.2.4
- Select alternating body rows with tbody tr:nth-of-type(even), creating a light striped background. section 8.2.4
- Select the third and later cells with :nth-of-type(n+3), then apply the rule only at wider viewport sizes. section 8.4.1
Emphasize item names
tbody td:nth-of-type(2) { font-weight: bold; } This targets the second td in each table-body row, making the item name stand out without adding a class to every cell. section 8.2.4
Listing 8.25 Right-aligning contents
@media (min-width: 550px) {
th:nth-of-type(n+3),
td:nth-of-type(n+3) {
text-align: right;
}
}
See the responsive n+3 selector applied to headers and cells from the third column onward. section 8.4.1
