Question

I can add a CSS class to the outer-most DIV and the inner-most DIV tags with “display:inline” but, I cannot do that with some in between.

The markup is something like this…

<span>ABC</abc>
<div>
  <div>
    <div>
       XYZ
    </div>
  </div>
</div>

I’d like the text ABC to be on the same line as the text XYZ, but because of the DIV tags, they are on seperate lines.

Answer 1

Well if there is a reason for you to have so many nested divs (you are unable to change the HTML etc.) you could apply a class to the outmost div and then use inheritence to apply display: inline;

HTML

<span>ABC</abc>
<div class="wrapper">
  <div>
    <div>
       XYZ
    </div>
  </div>
</div>

CSS

.wrapper, 
.wrapper div {
    display: inline;
}