:nth-child только для для классов с определенным атрибутом

Question

Сейчас делаю вот так:

& > .ccr-component {
    &:nth-child(n+6) {
       display: none;
    }
}

Но заметил, что свойство отрабатывает не так, как мне надо. У меня в блоке есть ccr-component, у которого уже display: none. Возникает вопрос, как мне применить это свойство для всех элементов, не считая первых пяти, у которых аттрибут type равен 2. Пробовал:

& > .ccr-component {
    &[type="2"]:nth-child(n+6) {
       display: none;
    }
}

Но это не работает. Он продолжает считать только первые 5 элементов.

Answer 1

Если приводите пример на SCSS / SASS / LESS, ставьте соответствующие метки. То, что у вас в коде - НЕ CSS.
Все работает, вот:

/* just for visual */

.parent {
  background: wheat;
  padding: 5px;
  width: 300px;
}

.ccr-component {
  border: 1px solid coral;
  margin: 5px;
  padding: 5px;
  display: inline-block;
}

.parent>.ccr-component[type="2"]:nth-child(n+6) {
  background: cyan;
}

<div class="parent">
  <div class="ccr-component" type="2">block 1</div>
  <div class="ccr-component" type="2">block 2</div>
  <div class="ccr-component" type="2">block 3</div>
  <div class="ccr-component" type="2">block 4</div>
  <div class="ccr-component" type="2">block 5</div>
  <div class="ccr-component" type="2">block 6</div>
  <div class="ccr-component" type="2">block 7</div>
  <div class="ccr-component" type="2">block 8</div>
  <div class="ccr-component" type="2">block 9</div>
  <div class="ccr-component" type="2">block 10</div>
</div>

У вас, судя по всему, проблемы с кодом SCSS. Посмотрите в сгенерированный стиль, что там получается в результате.

БЛОГ НА HUSL

:nth-child только для для классов с определенным атрибутом

Ответы (1 шт):