How to select children elements until element found - html

Question

I have content like this:
<div class="content">
<div class="row">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>
How do I select the links between h1 tags foo1 and foo2?
I have tried this:
.content .row > :not(h1) a
but this selects on:
foo11
foo12
foo21
and what I want is:
foo11
foo12
Also, the number of div.row after the rows containing h1 is variable.

Answer 1

You essentially have a hierarchy which is not represented in hierarchical form in your HTML. The best solution is to add another level to your HTML which represents the hierarchy.
If you can't do that, and are stuck with this HTML, then you can try with sibling combinators, but in any case, you will need some way to address the foo1 and foo2 elements. That could be a class, or nth-child if you know the order, or data attribute, or anything else. This cannot be something on the <h1> element, since CSS provides no way to go "up and over". It must be a way to address the higher-level row elements containing the h1. In the below, I'll assume you have a class available. In that case:
/* Make everything after `foo1` red. */
.foo1 ~ .row a { color: red; }
/* But make `foo2` and everything after it the original color. */
.foo2.row a, .foo2 ~ .row a { color: inherit; }
<div class="content">
<div class="row foo1">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row foo2">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>

Answer 2

The following should work:
.content .row:not(:last-child) a {
background-color: red;
}
<div class="content">
<div class="row">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
</div>

Answer 3

Is this kinda what you are looking for jsfiddle
?
for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
var x=document.getElementsByTagName('a')[i];
var t=x.innerHTML;
if (t=='foo11'||t=='foo12') {
x.style.backgroundColor="red"; }
}

Answer 4

You can do it like this with variable div's:
.content > .first ~ .row > a {color: red}
.content > .second ~ .row > a {color: initial}
<div class="content">
<div class="row first">
<h1>foo1</h1>
</div>
<div class="row">
foo11
</div>
<div class="row">
foo12
</div>
<div class="row">
foo13
</div>
<div class="row second">
<h1>foo2</h1>
</div>
<div class="row">
foo21
</div>
<div class="row">
foo22
</div>
<div class="row">
foo23
</div>
</div>
Here the initial keyword sets the color property to its default value and without defining additional two classes for .row's with the h1 tag inside, this can't be done in any other way with pure CSS.