Adjacent selector with traversal - html

Question

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.

Answer 1

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()