как применить :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, время: 17:55. |