Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2021, 11:58
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 241

как применить :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
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2021, 13:17
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,079

Ответ: Никак.
Красьте блоки там же, где меняете display. Или убирайте блоки не с помощью display, а целиком из DOM.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2021, 14:57
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 241

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

Последний раз редактировалось sovsem-nub, 14.11.2021 в 15:00.
Ответить с цитированием
  #4 (permalink)  
Старый 14.11.2021, 17:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,367

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы скрипт работал только если текущий документ iframe? ruslan_mart Общие вопросы Javascript 10 14.01.2015 13:56
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 09:47
Как сделать чтобы пользователь только мог 2 раза прослушать запись? KOTDG AJAX и COMET 0 11.02.2012 21:37
Как сделать, чтобы музыка <embed> на странице не играла только при первом посещении? Bad Request Общие вопросы Javascript 22 27.07.2009 19:44
Как сделать чтобы text() брал только текст родителя без текста вложенных контейнеров? Andrey32 jQuery 3 23.05.2009 01:33