CSS selector for elements before and after a given element

Question

I have a piece of generated HTML I am parsing. Roughly speaking, the part I am interested in for this problem looks like this:

<div class="rowset">
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <br><h2>WOWZA</h2><br>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
</div>

I need a way to select the divs that appear before WOWZA and the ones that appear after WOWZA in two separate operations. There will always be at least one div before and one after the WOWZA, and they always have the same class of "head". The number of head divs will vary from rowset to rowset.

The text WOWZA is constant, never changes. I just don't know how to use it as a separator in this context?

I can use jquery selectors for this too if necessary.

Do you have anything better than the text content that could be used as a selector? Can't you set a class or an unique enough attribute? Is it really the only h2 in `.rowset`? Is it the only element surrounded by `
`? Because, [there is no CSS selector that matches text content.](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) — Kaiido, Dec 10 '19 at 01:49
In this case I can't control the input at all, and yes it is really that simple. The tags have no attributes. There is a BR before and after the heading. — dylanT, Dec 10 '19 at 06:26
Ok, so your question becomes more answerable now, could you [edit] it so it says someting like "CSS selector for elements before and after a given element". Not having to select the text content is a game changer. Also, would be great to have an order of idea of what you'll wan to do with these selectors, since I fear you'll have to overwrite in the 'after' what has been done in the 'before'. — Kaiido, Dec 10 '19 at 06:33
The selectors are used by a dom inspector that is grabbing the data for further work. This isn't for formatting how things are displayed, it is for accessing and re-presenting the information in another form. — dylanT, Dec 10 '19 at 06:38

Shiny · Accepted Answer · 2019-12-10T01:54:07.393

I believe you would have to use jQuery for this, because CSS3 does not currently have a way to select an element by it's text content. However, with jQuery we can use .contains()

To select the elements after your text:

You can use ~, the General sibling combinator

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

To select the elements before your text:

We can use jQuery's .not() to exclude the elements in $afterWowza from the collection

let $afterWowza = $('.rowset h2:contains("WOWZA") ~ .head');
let $beforeWowza = $('.rowset .head').not($afterWowza);

$beforeWowza.css('background-color', 'blue');
$afterWowza.css('background-color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rowset">
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
  <br><h2 class="wowza">WOWZA</h2><br>
  <div class="head">...</div>
  <div class="head">...</div>
  <div class="head">...</div>
</div>

I was able to use the information in this post as the gateway to my eventual solution. Thanks for your help! — dylanT, Dec 29 '19 at 11:19

score 0 · Answer 2 · answered Dec 10 '19 at 02:18

0

You can use the jQuery selector: $("br ~ h2")

Or, wrap an HTML <span> or <div> around the line with an id and use jQuery selector: $("#idname")

answered Dec 10 '19 at 02:18

useruser

1
4

CSS selector for elements before and after a given element

2 Answers2