Programmiererforum

..1 to ..1
..2 to ..2
.....
< /code>
#nav1:checked ~ article section:nth-of-type(1),
#nav2:checked ~ article section:nth-of-type(2),
#nav3:checked ~ article section:nth-of-type(3),
#nav4:checked ~ article section:nth-of-type(4),
#nav5:checked ~ article section:nth-of-type(5),
#nav6:checked ~ article section:nth-of-type(6),
#nav7:checked ~ article section:nth-of-type(7),
#nav8:checked ~ article section:nth-of-type(8) {
display: block;
}

#nav1:checked ~ .nav label[for="nav1"],
#nav2:checked ~ .nav label[for="nav2"],
#nav3:checked ~ .nav label[for="nav3"],
#nav4:checked ~ .nav label[for="nav4"],
#nav5:checked ~ .nav label[for="nav5"],
#nav6:checked ~ .nav label[for="nav6"],
#nav7:checked ~ .nav label[for="nav7"],
#nav8:checked ~ .nav label[for="nav8"] {
background-color: #ccc;
}

Ist es möglich, Sequenzen wie diese in reinem CSS zu vereinfachen? z. B. < /p>
[code]..1 to ..1
..2 to ..2
.....
< /code>
#nav1:checked ~ article section:nth-of-type(1),
#nav2:checked ~ article section:nth-of-type(2),
#nav3:checked ~ article section:nth-of-type(3),
#nav4:checked ~ article section:nth-of-type(4),
#nav5:checked ~ article section:nth-of-type(5),
#nav6:checked ~ article section:nth-of-type(6),
#nav7:checked ~ article section:nth-of-type(7),
#nav8:checked ~ article section:nth-of-type(8) {
display: block;
}

#nav1:checked ~ .nav label[for="nav1"],
#nav2:checked ~ .nav label[for="nav2"],
#nav3:checked ~ .nav label[for="nav3"],
#nav4:checked ~ .nav label[for="nav4"],
#nav5:checked ~ .nav label[for="nav5"],
#nav6:checked ~ .nav label[for="nav6"],
#nav7:checked ~ .nav label[for="nav7"],
#nav8:checked ~ .nav label[for="nav8"] {
background-color: #ccc;
}
[/code]