Pure CSS way to assign color to a sibling element (no JS)

Question

I have code rendered on server side that results in this HTML

<div>
  <span> black/no color text </span>
  <span class="degraded"> red colored text <span>
</div>

.degraded class sets the element's color to red but depending on settings that css class can also be .available or .unknown which will affect the color of the text.

Is there anyway by using only css or html data attributes etc. to give 1st span the same color as 2nd one ? I don't know the color of the 2nd span beforehand

UPDATE: sorry if I didn't explain well. The class in 2nd element could be whatever, the .degraded etc are just placeholders, I dont know the class name beforehand so I can't set the sibling with + selector in css. I need to somehow tell the second 1st span to take whatever color the 2nd span is. I CAN rearrange the order of the elements within div

score 1 · Answer 1 · answered Jun 10 '20 at 18:36

1

Yes, you can use the adjacent sibling selector for css (target element + sibling element), which chooses the first sibling element to the selected element (in this case, the first span next to .degraded). I included a demonstration below.

.degraded, .degraded + span {
  color: red;
}

<div>
  <span class="degraded"> red colored text </span>
  <span> black/no color text </span>
  <span> not selected </span>
</div>

answered Jun 10 '20 at 18:36

Xenvi

887
5
10

Like @Dhanishtha Ghosh posted, you can create a single class with the css styling you want and apply that class to each element you want to have that same color – Xenvi Jun 10 '20 at 19:03
I dont know the css class name beforehand, it's rendered dynamically and depends on settings I have no control over – ihor.eth Jun 10 '20 at 19:24

score 1 · Answer 2 · answered Jun 10 '20 at 18:36

1

Yes there is a way. Adjacent sibling combinator

<style>
    .degraded {
        color: red;
    }

        .degraded + span {
            color: red;
        }

    .green {
        color: green;
    }

        .green + span {
            color: green;
        }
</style>

<div>
    <span class="degraded">red colored text</span>
    <span>black/no color text </span>
</div>

<div>
    <span class="green">green colored text</span>
    <span>black/no color text </span>
</div>

answered Jun 10 '20 at 18:36

VDWWD

35,079
22
62
79

1

I don't think there is a solution for that. There is no [previous selector](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) – VDWWD Jun 10 '20 at 19:17
I could rearrange them and then switch the order back with flex as long as I can get the color.. – ihor.eth Jun 10 '20 at 19:21

score 1 · Answer 3 · answered Jun 10 '20 at 18:37

Use the adjacent sibling combinator. From MDN docs:

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

To demonstrate that this works even if there are several different colours and classes involved, I've defined .unkown as having the colour blue.

Run the code snippet below to see if this does what you need:

.degraded, .degraded + span {
  color: red;
}

.unkown, .unkown + span {
  color: blue;
}

<div>
  <span class="degraded"> red colored text </span>
  <span> black/no color text </span>
  
  <span class="unkown"> red colored text </span>
  <span> black/no color text </span>
</div>

Pure CSS way to assign color to a sibling element (no JS)

3 Answers3