CODEWITHSUNDEEP
htmlcsscss-selectorstraversal
DanMad
DanMad

Reputation: 1755

Adjacent selector with traversal

I have a situation where I am using a fluid grid that I have built myself. These are parents of two content types I am dealing with: .media-tile and .blurb-tile.

I have removed excess markup that isn't relevant to this question, but my markup essentially looks like this:

<div class="row">
  <div class="three columns">
    <div class="media-tile">
      <!-- content -->
    </div><!-- END .media-tile -->
  </div><!-- END .three.columns -->
</div><!-- END .row -->
<div class="row">
  <div class="twelve columns">
    <div class="blurb-tile">
      <!-- content -->
    </div><!-- END .blurb-tile -->
  </div><!-- END .twelve.columns -->
</div><!-- END .row -->

My issue is that I have to have specific styling on the .blurb-tile content block when it follows .media-tilecontent block (as sometimes it doesn't follow it).

I thought that the following traversal method coupled with an adjacent selector would work:

.row .three.columns .media-tile + .row .twelve.columns .blurb-tile {
  /* my properties here */
}

However it does not...

In this specific situation, is there a selector that I can use along with traversal in order to create a conditional class for when my .blurb-tile content block follows my .media-tile content block?

Any help on this would be hugely appreciated.

Thank you in advance.

Upvotes: 1

Views: 50

Answers (1)

Alex Char
Alex Char

Reputation: 33238

With your current DOM structure isn't possible with pure css(at least with my css knowledge). I provide a jquery solution for your needs:

$(".media-tile")
  .parents(".row") //get ancestors elements with class row
  .next() //get next element(similar to css adjustment selector)
  .find(".blurb-tile") //find element with class blurb-tile
  .css("color", "red");//apply css for test purposes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="three columns">
    <div class="media-tile">
    </div>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <div class="blurb-tile">
      this
    </div>
  </div>
</div>

Also I fix some of your html errors.

References

.parents()

.next()

.find()

Upvotes: 1

Related Questions