CSS Выберите последний класс перед другим классом

Question

Извините за плохой титул, на самом деле не знал, как лучше описать. Страница выглядит так:

примечание: идентификаторы данных являются случайными, и я не знаю их заранее.

<main> 
    <h2 class="title">title1</h2> 
    <div id="1-3" class="content" data-id="1"></div> 
    <div id="1-2" class="content" data-id="1"></div> 
    <div id="1-1" class="content" data-id="1"></div> 

    <h2 class="title">title2</h2> 
    <div id="2-11" class="content" data-id="2"></div> 
    <div id="2-10" class="content" data-id="2"></div> 
    <div id="2-9" class="content" data-id="2"></div> 

    <h2 class="title">title3</h2> 
    <div id="3-18" class="content" data-id="3"></div> 
    <div id="3-17" class="content" data-id="3"></div> 
    <div id="3-16" class="content" data-id="3"></div> 
</main> 

есть ли способ, чтобы скрыть все, кроме дивы прошлого контента после каждого h2 в чистом CSS? Я не могу настроить таргетинг на них с идентификатором или идентификатором данных по отдельности. есть ли способ выбрать все элементы с тем же неуказанным атрибутом? поэтому выбраны все данные id = "same", а затем я могу отобразить nth-last-child (1)? Я сомневаюсь, что есть что-то вроде этого. Есть ли способ сделать это с помощью только CSS?

Я в настоящее время скрываю каждое .content, если следующий брат не является .content с js, но хочу знать, возможно ли это с помощью CSS.

Answer 1

Его не возможно без каких-либо scripting..you нужно использовать Javascript или Jquery

Answer 2

Я был бы соблазн предложить положить каждый блок

<h2 class="title">title2</h2> 
<div id="2-11" class="content" data-id="2"></div> 
<div id="2-10" class="content" data-id="2"></div> 
<div id="2-9" class="content" data-id="2"></div> 

внутри <section>, как это:

<section> 
<h2 class="title">title2</h2> 
<div id="2-11" class="content" data-id="2"></div> 
<div id="2-10" class="content" data-id="2"></div> 
<div id="2-9" class="content" data-id="2"></div> 
</section> 

Тогда вы можете ...

div { 
 
display: none; 
 
width: 200px; 
 
height: 40px; 
 
color: rgb(255,255,255); 
 
} 
 

 
section:nth-of-type(1) div { 
 
background-color: rgb(255,0,0); 
 
} 
 

 
section:nth-of-type(2) div { 
 
background-color: rgb(0,127,0); 
 
} 
 

 
section:nth-of-type(3) div { 
 
background-color: rgb(0,0,255); 
 
} 
 

 
section div:last-of-type { 
 
display: block; 
 
}

<main> 
 
    <section> 
 
    <h2 class="title">Title 1</h2> 
 
    <div id="1-3" class="content" data-id="1">Div 1</div> 
 
    <div id="1-2" class="content" data-id="1">Div 2</div> 
 
    <div id="1-1" class="content" data-id="1">Div 3</div> 
 
    </section> 
 

 
    <section> 
 
    <h2 class="title">Title 2</h2> 
 
    <div id="2-11" class="content" data-id="2">Div 1</div> 
 
    <div id="2-10" class="content" data-id="2">Div 2</div> 
 
    <div id="2-9" class="content" data-id="2">Div 3</div> 
 
    </section> 
 

 
    <section> 
 
    <h2 class="title">Title 3</h2> 
 
    <div id="3-18" class="content" data-id="3">Div 1</div> 
 
    <div id="3-17" class="content" data-id="3">Div 2</div> 
 
    <div id="3-16" class="content" data-id="3">Div 3</div> 
 
    </section> 
 
</main>