Is there away to select all siblings divs up to the next from a specific class?

Question

Is there away to select all siblings until the next specific class .parent?

In our case we have a list of Divs and there is no hierarchic in the HTML, they are all on the same level. We don't have access to update the HTML structure.

<div class="parent"></div>
<div></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>

For example would it be possible to select the parent and child and add a alternate colors?

Are you asking only for one specific subset of the divs? Or simply all divs without `.parent`? — TylerH, Oct 30 '19 at 16:24
you need select the divs, and check if have the attribute `class = parent ` — Black Hole, Oct 30 '19 at 16:26
@BlackHole Please don't provide answers in comments. Comments are for clarification requests or suggestions to improve posts. — TylerH, Oct 30 '19 at 16:27
Closing as a dupe of what I think you're asking... if/when you return, if that's not what you're asking, please edit your question to clarify exactly what you mean. — TylerH, Oct 30 '19 at 16:30
@TylerH not sure it is about a parent selector, the question title is probably badly worded ;) since the op is not too sure about how to — G-Cyrillus, Oct 30 '19 at 16:31
Looking to implement alternative classes based on the parent child relationship. So all divs under the first parent should have a background and the next parent and child should have no background. — Levikay, Oct 30 '19 at 16:52
@TylerH i reopened the question and reworded the question title , to avoid mistaking a class named parent with an hypothetic parent tag here ;) — G-Cyrillus, Oct 30 '19 at 16:59
@G-Cyr I wasn't confused about that. The question here and the dupe target both cover classes. The name of the class is irrelevant. — TylerH, Oct 30 '19 at 17:01
@TylerH , maybe, but there is no need to climb the html tree, css can do it without doing so — G-Cyrillus, Oct 30 '19 at 17:03
@G-Cyr Your comments aren't making any sense. OP appears to be wanting to select elements without the `.parent` class. The dupe target showed how to do that. — TylerH, Oct 30 '19 at 17:03
@Levikay FYI in your current markup there are no parent-child relationships. They are all siblings. Did you mean for them to have parent-child relationships (e.g. nesting divs within .parent divs)? — TylerH, Oct 30 '19 at 17:04
@TylerH I think the OP want to select a `.parent` element and all the div below it until the next `.parent` element (they are calling them child) to obtain a selection of parent-child. Basically each `.parent` and only the div before reaching the next `.parent` in order to apply an alternate style to each group — Temani Afif, Oct 30 '19 at 19:28
@TemaniAfif It's still unclear what OP expects (hence my most recent comment). Just a good example of why we should always wait for clarity before answering questions (or reopening them) :-) — TylerH, Oct 30 '19 at 19:58
Duplicate of [Can I write a CSS selector selecting elements NOT having a certain class or attribute?](https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr) — TylerH, Nov 08 '19 at 15:15

G-Cyrillus · Answer 1 · 2019-10-30T17:02:31.393

you can use the ~ selector and the :not() selector , so only elements in between .parent can be restyled.

example

.parent~div:not(.parent) {
  background:lightblue;
  margin: 0.5em;
}

/* for demo */
body {
  counter-reset: divs
}

div:before {
  counter-increment: divs;
  content: counter(divs)
}

<div class="parent"></div>
<div></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>

To alternate background-color each time a class .parent shows up, CSS will need extra selectors to overide the previous ones

example

.parent {background:lightgreen;}
.parent~div:not(.parent), 
.parent~ div.parent  ~ div:not(.parent)  ~ div:not(.parent)
/* and so on if there is more to mind about */{
  background:lightblue;
  margin: 0.5em;
}
.parent~ div.parent  ~ div:not(.parent) ,
.parent~ div.parent  ~ div:not(.parent)  ~ div:not(.parent) ~div ~div:not(.parent)
/* and so on if there is more to mind about */{
  background:none
}





/* for demo */
body {
  counter-reset: divs
}


div:before {
  counter-increment: divs;
  content: counter(divs);
  padding:0 ;
  margin:0.25em;
  line-height:1.5;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  background:white;
  height:1.5em;
  width:1.5em;
  box-shadow:0 0 2px;
}

<div class="parent"></div>
<div></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>
<div class="parent"></div>
<div></div>
<div></div>

Thank you. I need to group them so that i can apply alternative coloring. In your example, i would like to get 2, 3 4 to have a background but 6 with no background and again 8 and 9 with background. — Levikay, Oct 30 '19 at 16:42
@Levikay you will have to repeat the selector and increase its specifity to keep alternative coloring . https://codepen.io/gc-nomade/pen/MWWELZw That's about what CSS can do here — G-Cyrillus, Oct 30 '19 at 16:51
btw the `.parent~div` part of the selector is unnecessary here. Simply `div:not(.parent)` or even `:not(.parent)` will work here given OP's code. — TylerH, Oct 30 '19 at 17:05

Is there away to select all siblings divs up to the next from a specific class?

1 Answers1