I am facing an issue with styling div elements that have editable content through a WYSIWYG inline editor on my website. Users often do not understand the importance of enclosing similar blocks of code in containing DIVs for proper formatting, resulting in HTML like this:
<div class="borderBlock">Content...</div>
<div class="borderBlock">Content...</div>
<div>Other content</div>
<div class="borderBlock">Content...</div>
Although I have CSS rules defined to style these divs with borders and spacing, each div still gets its own border which is not the desired outcome. Ideally, I would like the first two divs to share a border and background color.
I have tried using CSS selectors like:
:not(.borderBlock) + .borderBlock { }
to target the first block with the borderBlock class, but I cannot find a way to selectively style the last borderBlock element without wrapping it in another div. Is there a CSS solution to this issue without resorting to JavaScript or adding additional container divs?