Форум

sovsem-nub · #1 (**permalink**) 14.11.2021, 11:58

<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

Aetae · #2 (**permalink**) 14.11.2021, 13:17

Ответ: Никак.
Красьте блоки там же, где меняете display. Или убирайте блоки не с помощью display, а целиком из DOM.

sovsem-nub · #3 (**permalink**) 14.11.2021, 14:57

Жаль.. а как просто закрасить с 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>

рони · #4 (**permalink**) 14.11.2021, 17:13

Сообщение от sovsem-nub

закрасить с 5 по 8-ой элемент в один стиль,

<!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>

Форум

Справочник

Discord чат

Курсы javascript