Скрыть все, кроме первого дочернего элемента элемента, используя чистый css

Я пытаюсь скрыть каждый другой дочерний элемент после первого элемента класса classa.

div.classa {
    display:none;
}
div.classa:first-child {
    display:block !important;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

Ответы

Ответ 1

Если вы хотите поддерживать IE8, тогда ваш единственный вариант общий селектор для роликов:

div.classa ~ .classa {
    display: none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

Ответ 2

Посмотрите здесь https://jsfiddle.net/32vw04jg/1/

<div class="content">
  <div>
    <h3>abc</h3>
    <div class="classa">some content</div>
  </div>
  <div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
  </div>
  <div>
    <h3>header3</h3>
    <div class="classa">another content</div>
  </div>
</div>


.content > div:not(:first-child) {
display: none;
}

Ответ 3

Проблема в вашем коде заключается в том, что вы хотите скрыть первый .classa, но первый .classa не является первым дочерним элементом в .content, h3 является первым потомком.

Итак, в качестве альтернативы псевдо-классу :not() вы можете использовать nth-of-type(n+2). Он выберет все элементы одного типа, кроме первого.

div.classa:nth-of-type(n+2) {
    display:none;
}

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

Ответ 4

Вы можете сделать это следующим образом:

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content1</div>
    <h3>xyz</h3>
    <div class="classa">more content2</div>
    <h3>header3</h3>
    <div class="classa">another content3</div>
</div>

Css:

.content > .classa:not(:nth-of-type(2)) {
    display:none;
}

Ответ 5

Вы можете попробовать pseudo class :not - https://developer.mozilla.org/en-US/docs/Web/CSS/:not

См. этот ответ

Ответ 6

В вашем случае есть новый CSS3 :first-of-type: Демо

.content h3, .content div{
    display:none;
}
.content .classa:first-of-type{  
    display : block;
}

Ответ 7

Если я правильно понимаю вопрос, цель здесь состоит в том, чтобы спрятать каждого потомка (h3 и div.classa) за исключением первого h3 и div.classa рядом с ним.

Самый простой способ сделать это - комбинация селекторов :first-of-type и ~ (general siblings).

div.classa:first-of-type ~ * { display:none; }

<div class="content">
    <h3>abc</h3>
    <div class="classa">some content</div>
    <h3>xyz</h3>
    <div class="classa">more content</div>
    <h3>header3</h3>
    <div class="classa">another content</div>
</div>

Ответ 8

Вот код, он может помочь вам с тем, что вы ищете.

#style1>div:not(:first-child) {
  display: none;
}

<body>
  <div id="style1">
    <div>
      <b>ABC</b>

      <div>Some Content</div>
    </div>
    <hr/>
    <div>
      <b>XYZ</b>
      <div>More Content</div>
    </div>

    <div>
      <b>Header3</b>
      <div>Another Content</div>
    </div>

  </div>

</body>

Ответ 9

.content > *{ display: none;}
.content > *:first-child{ display: block !important; }