Как выбрать div, который начинается с «paged-», а затем число на разных страницах? - PullRequest
Новая
       0

Как выбрать div, который начинается с «paged-», а затем число на разных страницах?

0 голосов
/ 03 января 2019

У меня есть динамическая страница, которая отображает несколько страниц и имеет класс, который начинается с 'paged-' и номера этой страницы.Я хочу удалить div с помощью SASS, когда он находится на странице 2 и далее, например: 

    .paged-2, .paged-3, .paged-4, .paged-5, .paged-100{
      .removeonpagetwoandso{
        display: none;
      }
    }

Но я не хочу писать из paged-2 в paged-100, так как не знаюсколько страниц будет в будущем.

Это не работает : 

    div[class^='paged'], div[class*='paged-']{
              .removeonpagetwoandso{
                display: none;
              }
    }

РЕДАКТИРОВАТЬ: добавлена ​​структура HTML

Страница 1: 

<body class="home"> 
 <div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>

Страница 2 и так: 

<body class="home paged-2"> 
 <div class="removeonpagetwoandso">Home Page 1 Only</div>
</body>

Ответы [ 2 ]

0 голосов
/ 03 января 2019

SASS compile 

div[class^='paged'],
div[class*='paged-']{
  .removeonpagetwoandso{
    display: none;
    }
  }

до 

div[class^=paged] .removeonpagetwoandso,
div[class*=paged-] .removeonpagetwoandso {
  display: none;
}

В вашем случае 

div[class^='paged-'] {
    .removeonpagetwoandso {
        display: none;
    }
}

достаточно. Скомпилировано в 

div[class^=paged-] .removeonpagetwoandso {
  display: none;
}

что означает дочерний элемент, имеющий removeonpagetwoandso класс элементов, чей класс начинается с paged-. Я думаю, что у вас есть проблемы с вашей структурой HTML. Ваш HTML должен выглядеть следующим образом: 

<div class="paged-1">
    <div class="removeonpagetwoandso">
        paged-1
    </div>
</div>
<div class="paged-2">
    <div class="removeonpagetwoandso">
        paged-2
    </div>
</div>
<div class="paged-3">
    <div class="removeonpagetwoandso">
        paged-3
    </div>
</div>
<div class="paged-4">
    <div class="removeonpagetwoandso">
        paged-4
    </div>
</div>
<div class="paged-5">
    <div class="removeonpagetwoandso">
        paged-5
    </div>
</div>
<div class="paged-100">
    <div class="removeonpagetwoandso">
        paged-100
    </div>
</div>
0 голосов
/ 03 января 2019

Пожалуйста, попробуйте это CSS 

<style> 
div[class^="paged-"]{
 .removeonpagetwoandso{
   display: none;
  }
}
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...