CSS: Conditional Formatting Based on a Class of Adjacent Elements

Question

I have several adjacent span tags that have a display: inline-block; style display: inline-block; , eg:

 span.mark { background-color: yellow; display: inline-block; vertical-align: center; border-width: 1px; border-color: red; border-style: solid; border-radius: 3px; } 

 <p>Some <span class="mark">standalone</span> test. Some <span class="mark">continuous </span><span class="mark">elements </span><span class="mark">that</span> should be formatted together.</p> <p>Some <span class="mark">normal </span><b><span class="mark">and strong</span></b> text that should be formatted together.</p> 

So, at present, these span tags all get their own small borders. However, I want them to look like one border around them. So, technical, external ones should have border-width-left: 1px; for the first and border-width-right: 1px; for the latter, and those in the middle should have border-width: 1px 0px; .

Is there a way to do this in CSS? Basically, the rule should be: "If it is a span with a label class, and the elements before and after me are spaces between the label class, then apply the middle element style. If it is a span with a label class, and the element in front of me is not an element with a label style, and the element after me is the span element with the label style, use the style of the left element. Etc ... "

I know there is span.mark:before and span.mark:after , but I really don't want to style the element before or after the current one. I want the style of the current best for what came before and after. In addition, I need to check the element class :before and :after .

edit Maybe my example was too simplistic. The specified <p> will have more than one line of <span> tags. All :first-of-type :last-of-type looks very promising, I did not know about it. I'm afraid the solution will be harder though, if it works at all ...

Answer 1

With the support of pseudo-elements and a combination of absolute positioning and stacking context, the intended behavior can be achieved.

The fragment below shows how each preceding element of a pseudo-element fits below the next element; providing the impression of continuous continuity, while maintaining the visual impression of a complete border for autonomous elements.

Code snippet demonstration:

 span.mark { background-color: yellow; display: inline-block; border-width: 1px; border-color: red; border-style: solid; padding: 0px 2px; border-right: 0px; border-left: 0px; position: relative; } span.mark:after, span.mark:before { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; /* for border-radius */ border-radius: 3px; background: yellow; width: 5px; border-top: 1px solid red; border-bottom: 1px solid red; } span.mark:after { border-right: 1px solid red; right: -2px; } span.mark:before { border-left: 1px solid red; left: -2px; } 

 <p>Some <span class="mark">standalone</span> test. Some <span class="mark">continuous </span><span class="mark">elements </span><span class="mark">that</span> should be formatted together.</p> <p>Some <span class="mark">normal </span><b><span class="mark">and strong</span></b> text that should be formatted together.</p> 

Answer 2

Yes, I would use the :first-child and :last-child pseudo-selectors so that the style of the first / last range remains differently. See https://jsfiddle.net/samando27/xydqpbx8/1/