How to make the CSS + operator not ignore plaintext in between elements?

Question

A popular online forum that I post to does not have the ability to create inline code spans in posts. Therefore, I'm creating a userscript in Tampermonkey to turn code blocks into inline code spans unless they're immediately following a line break  . I've made a Tampermonkey script so far that injects a style into the <head> of the online forum, using the following selector:

br + code {
  background-color: yellow;
}

<body>
  <h2>Example A (this is correct)</h2>
  <p>
    This text is not yellow. <code>This code is not yellow.</code>
    <br>
    <code>But after a line break, the code is yellow!</code>
  </p>
  <h2>Example B (unwanted behaviour)</h2>
  <p>
    This text is not yellow. <code>This code is not yellow.</code>
    <br>
    After a line break, there is more text...
    <code>...but the code is still yellow!</code>
  </p>
  <h2>Example C</h2>
  <p>
    This text is not yellow. <code>This code is not yellow.</code>
    <br>
    After a line break, there is more text and an empty span <span></span>...
    <code>and that makes the code not yellow anymore!</code>
  </p>
</body>

Example A works perfectly, selecting only the code span that immediately follows the line break. However, example B has unwanted behvaiour.

The problem with example B is that there is plaintext content in between the line break   and the inline code span. It seems like the CSS selector is selecting the code span after the line break even if there is plain text content in between them and making it yellow, but I don't want that.

Example C is an HTML way of fixing this issue. I added an empty  in between the   and the <code>. This caused the CSS style not to select the code, deciding that the code was not the first element to follow the  .

But I would prefer a CSS-side fix to this issue. What is it, if any?

Unfortunately, because of this forum having strict policies on what tags are allowed in forum posts, any alternate methods won't work. I need an answer that actually solves the posed qustion, and I can't change the HTML provided in any way, otherwise it's likely to get stripped from my forum post. The following is a list of what I have tried. In all of the following cases the additional info will be stripped:

Attempting to put CSS classes on the parts I want to style.
Attempting to add attributes other than font-size to a section of text.

The only reason that the empty span solution (example C) works for me is that the forum server lets you set font sizes with . If I were to go through with what I have now, I would need to surround part of the line before the inline code span with this.

As far as [adjacent sibling combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) goes, I don't see a pure CSS way to fix example B without touching HTML code. However, I'm curious why would you want to define code background color in this way? In my opinion, it's better to specifically add a CSS class to the `code` elements that need yellow background, as it won't rely on the HTML structure and is easier to maintain/read/understand as well — Mark, Jan 22 '21 at 02:49
I'm sure for others but for me, it's not clear which text should be yellow. Do you mean "This text/code is not yellow." should be yellow? — Sunil, Jan 22 '21 at 05:21
okay got it. Just what I meant to say was that it would be more useful to know what text you need in yellow in all examples because global CSS is being used. — Sunil, Jan 22 '21 at 06:12
Iterate all the `` with js and check previous sibling and toggle a class or inline style accordingly — charlietfl, Jan 22 '21 at 13:28

score 1 · Answer 1 · answered Jan 22 '21 at 01:32

1

This isn't a CSS issue, but rather a misunderstanding of the semantics and purpose of the  and   tag. Here is a great SO post talking about semantics and their importance.

TL:DR: Restructure your HTML to be semantically correct before worrying about your CSS, and use CSS classes as appropriate rather than complicating your code with sibling selectors:

.highlighted {
    background-color: yellow;
}

<p>Your first paragraph</p>

<p>A second paragraph without the linebreak</p>

<code class="highlighted">... code that is highlighted ...</code>

<p>A third paragraph</p>

<code>... this code isn't highlighted ...</code>

answered Jan 22 '21 at 01:32

El-Mo

370
2
13

I understand that, but the problem is that the context of my situation doesn't allow that. I can't use classes. I'll edit my question to explain further; can you think of another solution? – Jan 22 '21 at 03:01
2

@ExpertCoder14: IMO, since you're writing a userscript anyway and not a userstyle (and therefore aren't constrained to using only CSS), you're better off changing the HTML into something more manageable than trying to shoehorn CSS into that tag soup. The forum's restrictions on what HTML is allowed in posts doesn't affect what you can do with a userscript. It does, however, mean that anyone who wishes to view content as you intended needs to use your userscript. – BoltClock Jan 22 '21 at 08:16
@BoltClock Okay, I figured that may be the case. I guess it's back to the drawing board then for me, to learn more about creating userscripts. – Jan 22 '21 at 15:16

score 0 · Answer 2 · answered Jan 22 '21 at 03:16

0

Why you don't put all element that you need to change background to

<div style="background-color: yellow;">
   <br>
   <p>
</div>

answered Jan 22 '21 at 03:16

Nguyễn Thanh Bình

26
7

The context of my question would not allow that. Please view the edits to the question carefully. – Jan 22 '21 at 03:22

score 0 · Answer 3 · answered Jan 22 '21 at 07:46

Using :nth-child() selector, <code>...<\code> can inherit its background color from its parent element or can override with a custom background color. For example, it can be implemented in your given HTML as below:

br + code {
  background-color: yellow;
}

h2:nth-child(3) + p code:nth-child(3) {
  background-color: inherit;
}

<body>
  <h2>Example A (this is correct)</h2>
  <p>
    This text is not yellow. <code>This code is not yellow.</code>
    <br>
    <code>But after a line break, the code is yellow!</code>
  </p>
  <h2>Example B (unwanted behaviour)</h2>
  <p>
    This text is not yellow. <code>This code is not yellow.</code>
    <br>
    After a line break, there is more text...
    <code>...but the code is still yellow!</code>
  </p>
  <h2>Example C</h2>
  <p>
    This text is not yellow. <code>This code is not yellow.</code>
    <br>
    After a line break, there is more text and an empty span <span></span>...
    <code>and that makes the code not yellow anymore!</code>
  </p>
</body>

The problem is, the code won't always be the 3rd child of the paragraph... — , Jan 22 '21 at 19:40

How to make the CSS + operator not ignore plaintext in between elements?

3 Answers3