как применить :nth-of-type(n+5) чтобы учитывались только видимые детишки?
<style>.tovarblock tw[style="display: inline-block;"]:nth-of-type(n+5){ color:red; } </style>
<div class="tovarblock" >
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">1</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">2</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">3</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: none;">4</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">5</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">6</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">7</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: none;">8</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: none;">9</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">10</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">11</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: none;">12</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">13</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: none;">14</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: none;">15</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">16</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: inline-block;">17</tw>
<tw class="col-4 simpleCart_shelfItem" style="display: none;">18</tw>
</div>
есть такой код, часть блоков не видно, я пытаюсь раскрасить в красный все видимые блоки с четвертого по восьмой так, как будто невидимых не существует, чтобы nth их не учитывал. в этом примере цифры 6 7 10 11 должны стать красными, а если скроется первый бок в none; то красными должны стать 7 10 11 13 |
Ответ: Никак.
Красьте блоки там же, где меняете display. Или убирайте блоки не с помощью display, а целиком из DOM. |
Жаль.. а как просто закрасить с 5 по 8-ой элемент в один стиль, если они все видны.
<style> .tovarblock tw:nth-child(n+5) { color:red; }
.tovarblock tw:nth-child(n+9) { color:black; }</style>
<div class="tovarblock" >
<tw class="col-4 simpleCart_shelfItem" >1</tw>
<tw class="col-4 simpleCart_shelfItem" >2</tw>
<tw class="col-4 simpleCart_shelfItem" >3</tw>
<tw class="col-4 simpleCart_shelfItem" >4</tw>
<tw class="col-4 simpleCart_shelfItem" >5</tw>
<tw class="col-4 simpleCart_shelfItem" >6</tw>
<tw class="col-4 simpleCart_shelfItem" >7</tw>
<tw class="col-4 simpleCart_shelfItem" >8</tw>
<tw class="col-4 simpleCart_shelfItem" >9</tw>
<tw class="col-4 simpleCart_shelfItem" >10</tw>
<tw class="col-4 simpleCart_shelfItem" >11</tw>
<tw class="col-4 simpleCart_shelfItem" >12</tw>
<tw class="col-4 simpleCart_shelfItem" >13</tw>
<tw class="col-4 simpleCart_shelfItem" >14</tw>
<tw class="col-4 simpleCart_shelfItem" >15</tw>
<tw class="col-4 simpleCart_shelfItem" >16</tw>
<tw class="col-4 simpleCart_shelfItem" >17</tw>
<tw class="col-4 simpleCart_shelfItem" >18</tw>
</div>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.tovarblock tw:nth-child(n+5):nth-child(-n+8) {
color: red;
}
</style>
</head>
<body>
<div class="tovarblock">
<tw class="col-4 simpleCart_shelfItem">1</tw>
<tw class="col-4 simpleCart_shelfItem">2</tw>
<tw class="col-4 simpleCart_shelfItem">3</tw>
<tw class="col-4 simpleCart_shelfItem">4</tw>
<tw class="col-4 simpleCart_shelfItem">5</tw>
<tw class="col-4 simpleCart_shelfItem">6</tw>
<tw class="col-4 simpleCart_shelfItem">7</tw>
<tw class="col-4 simpleCart_shelfItem">8</tw>
<tw class="col-4 simpleCart_shelfItem">9</tw>
<tw class="col-4 simpleCart_shelfItem">10</tw>
<tw class="col-4 simpleCart_shelfItem">11</tw>
<tw class="col-4 simpleCart_shelfItem">12</tw>
<tw class="col-4 simpleCart_shelfItem">13</tw>
<tw class="col-4 simpleCart_shelfItem">14</tw>
<tw class="col-4 simpleCart_shelfItem">15</tw>
<tw class="col-4 simpleCart_shelfItem">16</tw>
<tw class="col-4 simpleCart_shelfItem">17</tw>
<tw class="col-4 simpleCart_shelfItem">18</tw>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:09. |