CSS Wählen Sie die letzte Klasse vor der anderen Klasse

Question

Sorry für einen schlechten Titel, wusste nicht wirklich besser zu beschreiben. Seite sieht so aus

hinweis: daten-ids sind zufällig und ich kenne sie nicht vorher.

<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> 

ist es eine Möglichkeit, alle aber zuletzt Inhalt divs nach jedem h2 in reinem CSS zu verbergen? Ich kann sie nicht einzeln mit ID oder Daten-ID ansprechen. Gibt es eine Möglichkeit, alle Elemente mit demselben nicht spezifizierten Attribut auszuwählen? also alle daten-id = "selbe" sind ausgewählt und dann kann ich das nth-last-child (1) einblenden? Ich bezweifle, dass es so etwas gibt. Gibt es eine Möglichkeit, dies nur mit CSS zu erreichen?

Ich verstecke derzeit jeden .content, wenn das nächste Geschwister nicht .content mit js ist, aber wissen möchte, ob es mit CSS möglich ist.

Answer 1

Es ist nicht möglich, ohne irgendwelche scripting..you Javascript oder Jquery verwenden müssen

Answer 2

ich versucht würde vorschlagen, jeden Block von

setzen

<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> 

in einem <section>, wie folgt aus:

<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> 

Dann können Sie ...

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>