комбинирование: nth-child с: not () селекторами - PullRequest
Новая
       0

комбинирование: nth-child с: not () селекторами

0 голосов
/ 12 февраля 2019

Я пытаюсь выучить CSS, но испытываю некоторые проблемы с ним.Как выбрать каждый третий блок, кроме блока invicible из числа подсчетов?

Когда я использую div.col-12:nth-child(3n+3) {background:blue}, он не работает должным образом, считая невидимый блок, как и все остальные.Я пытался добавить :not([id="invisible"]) к нему, но он совсем не работает. 

div.col-12:nth-child(3n+3) {
  background: blue
}
<div class=parent>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div id="invisible"></div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>

1 Ответ

0 голосов
/ 12 февраля 2019

РЕДАКТИРОВАТЬ

:nth-of-type & :not()

Демонстрация 2

Поскольку OP не может изменять HTML (визуализируется динамически?) - мы можем использовать *Селектор 1009 * и отрицательная начальная точка для числа :nth-of-type.Это первый набор правил ниже, который почти работает, но первый .col-12 синий.Таким образом, второй набор правил ниже меняет первый .col-12 обратно на белый.Причина, по которой :not() используется снова, заключается в том, что :not(#invisible) в первом наборе правил имеет очень высокую специфичность, поскольку используется идентификатор - добавление .col-12 ко второму набору правил дает более высокую специфичность, чем первый набор правил.

body > div > div:nth-of-type(3n-2):not(#invisible) {
  background: blue
}
body > div > div.col-12:first-of-type:not(#invisible) {
  background: white 
}

:nth-of-type

Демо 1

Измените #invisible на что угодно, кроме <div>, затем используйте :nth-of-type.nth-of-type учитывает только tagName s как div или section, поэтому, изменив #invisible на другой тег, вы исключите его.Также используйте дочерние комбинаторы >, чтобы «заблокировать» его. В вашем макете есть много <div> с, так что: 

div:nth-child(3n+3) //The +3 might be a reaction to the unexpected results?

Будет учитывать все <div> с, которые являются детьми всего.Это с другой стороны: 

body > div > div:nth-of-type(3n)

сужает возможности.Прямой потомок (или ребенок) <body> равен .parent, тогда учитываются только дети .parent.Теперь .block1 и .block2 никогда не рассматриваются (это не влияет на ваш макет, скажем, из-за 3n, но лучше рассмотреть это в будущем).

Демо 1 

.col-12 {
  outline: 3px dashed red
}

body>div>div:nth-of-type(3n) {
  background: blue
}
<div class=parent>

  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>

  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>

  <aside id="invisible"></aside>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
</div>

Демо 2 

.col-12 {
  outline: 3px dashed red
}

body>div>div:nth-of-type(3n-2):not(#invisible) {
  background: blue
}

body>div>div.col-12:first-of-type:not(#invisible) {
  background: white
}
<div class=parent>

  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>

  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>

  <div id="invisible"></div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
  <div class="col-12">
    <div class="block1">
      <a class="link">link</a>
    </div>
    <div class="block2">
      <p class="text">some text</p>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...