How to apply linear-gradient css to generally any 2 spans that have background color overlapped with each other?

Issue

Given Situation

1 .

Say I have 2 spans, both with background-color, and one is inside another (overlapped):

<p>Alpha <span class="highlightTopic">Beta <span class="highlightYellow">Gamma Delta</span> Epsilon</span> Eta</p>

span.highlightYellow {
  background-color: rgba(255, 237, 0, 0.5);
}

span.highlightTopic {
  background-color: rgba(182, 203, 232, 0.5);
}

2 .

They are overlapped, but I want to be able to see both background-color, so I apply

1. opacity (applied, see above)
2. linear-gradient (see below)

for the overlapped background-color

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

3 .

html output:

jsfiddle: script

Problem

4 .

Now lets say, there is more than 2 spans, say 10 spans.

Then the number of my css style for each combination of them will be 45 ($$10:nCr:2 = \sum _{n=1}^{10-1}n = 45$$).

ie: I need 45 of this

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

=>

5 .

So, How to apply linear-gradient css to generally any 2 spans that have background-color overlapped with each other? (Without specifying 45 different combinations of them.)

Solution

Solution (workaround)::

jsfiddle: Highlight Background color Overlap (soln)

1 .

you need a Master class (Css Style Rule)

span.hlBackgroundMs {
  --color-main: aliceblue;
  background-color: var(--color-main);
}

2 .

add the additional Master class to each of the element

<span class="highlightYellowPaint hlBackgroundMs">Linux</span>

3 .

3 .1

add a variable --color-main to the Master class;

3 .2

and use that --color-main for assigning colors, for all the Css Style Rules that were using for highlighting (instead of using background-color)

span.hlBackgroundMs {
  --color-main: aliceblue;
  background-color: var(--color-main);
}
span.highlightYellowPaint {
  --color-main: rgba(255,237,0,0.50);
  /* background-color: rgba(255,237,0,0.50); */
}

4 .

4 .1

pick the color of the outer span & assign it to --color-main-outerspan

4 .2

assign the 2 colors to linear-gradient by using var(--color-main) & var(--color-main-outerspan)

p > span.hlBackgroundMs {
  --color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);  
}

limitations & notes::

1. this may only works for 2 colors

2. p > span.hlBackgroundMs is used to pick the outer span, which is limited to certain cases

   • (note: span.hlBackgroundMs:has(> span.hlBackgroundMs) might be better, if your browser supports :has())

3. more nested (lv 3+) span may not work

4. the logic is not easy to follow (there might be a better way)

5. you may just use an alpha with 0 transparency (to simply the work)

6. pure css (you may use js to achieve this too)

thinking process::

the whole point is to:_

1. being able to pick the color from the (parent) outer span & the (child) inner span

2. select the inner span, then assign those 2 colors to linear-gradient of it.

=>

• to be able to pick color from alongside (inner/outer span's) Css Style Rule

  -> you need to use a variable --color-main

• to be able to share the variable with diff alongside Css Style Rule

  • (eg: share between highlightContentObject & highlightTechStack),

  -> you need to use an additional Master class span.hlBackgroundMs for that element, (to store & share that variable --color-main)

• to be able to distinguish the 2 diff color (instead of just picking the inner span 's --color-main all the time)

  -> you need to use another variable --color-main-outerspan to store the color from the outer span

• to be able to "store the color from the outer span"

  -> you need to distinguish the "outer" & "inner" first

  ->

  • p > span.hlBackgroundMs <=> outer

  • span.hlBackgroundMs > span.hlBackgroundMs <=> inner

• (logic all set, assign the values)

---

(update)

As the span gets more nested, you may try out the below tricks.

• (though, as the nesting gets more complicated, the less reliable are these tricks...)

• (the point is to get the color from outer span)

p > span.hlBackgroundMs {
  --color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}

p > span > span.hlBackgroundMs {
  --color-main-outerspan-lv2: var(--color-main);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv2) 50%);
}

/*p > span > span > span.hlBackgroundMs {
  --color-main-outerspan-lv3: var(--color-main);
}
p > span > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}*/
p > span > span > span > span.hlBackgroundMs {
  background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}

Answered By - Nor.Z