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 <br>? Because, there is no CSS selector that matches text content. — Kaiido
– Kaiido, Commented Dec 10, 2019 at 1: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
– dylanT, Commented Dec 10, 2019 at 6: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
– Kaiido, Commented Dec 10, 2019 at 6: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
– dylanT, Commented Dec 10, 2019 at 6:38

Shiny · Accepted Answer · 2019-12-10 01:54:07Z

2

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>

edited Dec 10, 2019 at 1:54

answered Dec 10, 2019 at 1:29

Shiny

5,0953 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dylanT Over a year ago

I was able to use the information in this post as the gateway to my eventual solution. Thanks for your help!

useruser · Accepted Answer · 2019-12-10 02:18:00Z

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, 2019 at 2:18

useruser

15 bronze badges

Collectives™ on Stack Overflow

CSS selector for elements before and after a given element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related