Тъй като:
Понеже на рамките на елементи / |
Не сме задали свойството border-radius, те остава правоълълни и при оцветяване на части(редове) от таблица самия background излиза от заоблените очертанията- затова използваме свойство overflow:hidden при селектор table
:nth-child()
The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings.
/* Selects the second element in a list */
li:nth-child(2) {
color: lime;
}
/* Selects every fourth element
among any group of siblings */
:nth-child(4n) {
color: lime;
}
Syntax
:nth-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.
Keyword values
odd
Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.
even
Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.
Functional notation
Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:
A is an integer step size,
B is an integer offset,
n is all positive integers, starting from 0.
It can be read as the An+Bth element of a list.
Examples
Example selectors
tr:nth-child(odd) or tr:nth-child(2n+1)
Represents the odd rows of an HTML table: 1, 3, 5, etc.
tr:nth-child(even) or tr:nth-child(2n)
Represents the even rows of an HTML table: 2, 4, 6, etc.
|
