1

Given the following markup:

<div class="wrapper">

  <div class="inner-wrapper">
    <div class="first">
      <div class="second">
      </div>
    </div>
</div>

 <hr class="separator">

<div class="inner-wrapper">
    <div class="first">
      <div class="second">
      </div>
    </div>
</div>

</div>

How can i select class .first and .second AFTER the .separator? I have tried following:

.wrapper .separator + .inner-wrapper .first

However, it doesn't seem to work. I thought this reads something like this, from left to right:

Select ".separator" that has ".wrapper" as parent.
Select ".inner-wrapper" that follows after ".separator"
Select ".first" that follows ".inner-wrapper"

Since it's not working, i guess i'm misunderstanding the functionality of one of the selectors. Any help (or alternatives for that matter) is appreciated.

PS:

The Markup comes from an external source. While i could technically add a class with JS, i prefer not to if possible. I also tried playing around with the ":not" selectors, but i didn't get it to work either.

Thanks

Edit:

In the screenshot, inside the "header" container, there is the same construct, so a container with inner-wrapper, first etc. https://i.stack.imgur.com/CdKej.png

yayecic831
  • 11
  • 2
  • 2
    Are you sure it's not working? https://jsfiddle.net/zrn2gska/ – Justinas Jan 19 '21 at 14:42
  • 1
    As @Justinas said, this works: https://jsfiddle.net/0thjc8b4/. Do you have another style overriding your `inner-wrapper`? – disinfor Jan 19 '21 at 14:44
  • 1
    It's working for me: https://codepen.io/rcyou/pen/QEObEk/ – rahulpsd18 Jan 19 '21 at 14:46
  • This is pseudo-markup, but i just checked and this is indeed how it's structured. I can't get it to work. Checking the rules in the viewsource, i can't see my css, so it's not being overriden. The selector just seems not to work. – yayecic831 Jan 19 '21 at 14:52
  • Are you sure your CSS is being loaded? You can see on all the fiddles and codepens, that the selector structure you have does work. – disinfor Jan 19 '21 at 14:53
  • Yes. The content is being loaded in dynamically, but other css rules i wrote are working. I'm not quite sure why i can't get this to work. The structure is 100% the same. I can see that a media query is applied. But then again, i can not see my rule at all, so i don't think it's a case of it being overriden – yayecic831 Jan 19 '21 at 14:57
  • OK. So, now to debug. Start with one rule at at time. Start with the `.wrapper`, apply some base styles to see if that works. Then continue to move down the selectors until you find where it's no longer applying. – disinfor Jan 19 '21 at 15:00
  • Basically everything after the "+" doesn't seem to work anymore. I can select the separator, but everything after that using "+", doesn't seem to get any styling applied. Basically: .wrapper .separator = works. But -----> .wrapper .separator + .inner-wrapper = doesn't work – yayecic831 Jan 19 '21 at 15:05
  • Normally, this is frowned upon, but do you have a link we can see? – disinfor Jan 19 '21 at 15:10
  • Sadly not. But i have edited my original post with a screenshot, showing that the structure is the same. Maybe i'm just not seeing something. – yayecic831 Jan 19 '21 at 15:16
  • Can you give us a bit more than that? Grab the source code and paste it here. – disinfor Jan 19 '21 at 15:19
  • As i had to sign an NDA, i can't do that. I will update this post when i find the solution to the problem. – yayecic831 Jan 19 '21 at 15:21
  • An NDA shouldn't stop you from posting some code. Strip out the text and show us some more HTML. – disinfor Jan 19 '21 at 15:32

2 Answers2

0

The selector you wrote works, but you said you want select both .first and .second elements and that only finds .first element, so you can use:

.wrapper .separator + .inner-wrapper .first, .wrapper .separator + .inner-wrapper .second

Or better:

.wrapper .separator + .inner-wrapper :is(.first,.second)

And just for your knowledge, browsers always match selectors from right to left as described in this question.

mck89
  • 18,918
  • 16
  • 89
  • 106
-2

Select it using ~

For example:

seperator ~ inner-wrapper first,seperator ~ inner-wrapper first second{
}
Aneeq Ak
  • 61
  • 9