CSS Select last class before different class

Question

Sorry for a bad title, didn't really know how to describe better. Page looks like this

note: data-ids are random and i don't know them beforehand.

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

is there any way to hide all but last content divs after each h2 in pure CSS? I can't target them with id or data-id individually. is there any way to select all the elements with the same unspecified attribute? so all data-id="same" are selected and then I can unhide the nth-last-child(1)? I doubt there is something like this. Is there any way to accomplish this with just CSS?

I'm currently hiding every .content if the next sibling isn't .content with js but want to know if it's possible with CSS.

So you want to hide all but one div with content class after title3 right? — Leo the lion, Dec 10 '16 at 07:27
@Oriol I want to show div id 1-1, 2-9 and 3-16. and want to hide other content divs. — DD3R, Dec 10 '16 at 07:52
In a distant future, maybe `.content:not(:has( + .content))` will work — Oriol, Dec 10 '16 at 07:55
See http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i#comment45175206_7298062 — TylerH, Dec 10 '16 at 08:01

score 0 · Answer 1 · answered Dec 10 '16 at 06:23

0

Its not possible without any scripting..you need to use javascript or Jquery

answered Dec 10 '16 at 06:23

Darshak

859
7
18

Yeah as I said I'm currently doing this with js, was just wondering if I could get by without it. Thanks for the answer. – DD3R Dec 10 '16 at 06:30
It is possible. if you always have an `h2` followed by 2 hidden `divs` followed by a visible `div`, you can use the selector: `main:nth-child(4n-1), main:nth-child(4n-2)` to hide the hidden `divs`. – Rounin Jan 05 '17 at 11:49

score 0 · Answer 2 · answered Dec 18 '16 at 20:23

I'd be tempted to suggest putting each block of

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

inside a <section>, like this:

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

Then you can...

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>

Yeah If I could modify html than it would be trivial, but seems like what I was asking is impossible to do with css currently. Anyway I don't need it anymore so no big deal. — DD3R, Jan 05 '17 at 10:51
Hmm. You didn't mention that you couldn't modify html. That's not a normal situation. And, even then, depending on other factors, hiding all divs but the last one after each `h2` is absolutely possible. For instance, if you always have an `h2` followed by 2 hidden `divs` followed by a visible `div`, you can use the selector: `main:nth-child(4n-1), main:nth-child(4n-2)` to hide the hidden `divs`. — Rounin, Jan 05 '17 at 11:45
Yeah I didn't mention html because I asked if it could be done in pure css. divs numbers after h2 vary, so that method wouldn't work. It's no longer a problem though, I left it working with javascript, as it couldn't be done with css. Thanks for your help. — DD3R, Jan 05 '17 at 12:14

CSS Select last class before different class

2 Answers2