CSS - Non-immediate sibling?

HTML & CSS
1

I know there’s an Adjacent Sibling combinator.
I know there’s a General Sibling combinator.
Is there a means by which to apply the following using CSS:

For a given set of sibling DIV’s with some attribute “data-num”, with a sibling INPUT with a given value such that it matches one of the data-num’s of the DIV’s, apply a CSS styling to that DIV and all antecedent sibling DIVs. (or, obviously, to all subsequent siblings and not the current value.)

2

my brain is now trying to tell me the answer is in the data-num.

give the first data-num “1”, give the second data-num “12”, the third “123”, etc, and then use a *= selector, which will work as long as i’m not selecting between more than number of valid single-characters in a string divs.

Still feel like there should be a better way.

3

Hi there m_hutley,

if you could post the actual HTML
it might help us see your problem. :winky:

coothead

4

Well it’s a work in progress, but essentially the way my brain’s currently solving it, it’s this:

<input name='selector' value='3' type='hidden' id='hide'>
<div class='idiv' data-num='1'><input name='selector' value='1' type='radio'></div>
<div class='idiv' data-num='12'><input name='selector' value='2' type='radio'></div>
<div class='idiv' data-num='123'><input name='selector' value='3' type='radio'></div>
<div class='idiv' data-num='1234'><input name='selector' value='4' type='radio'></div>
<div class='idiv' data-num='12345'><input name='selector' value='5' type='radio'></div>
<div class='idiv' data-num='123456'><input name='selector' value='6' type='radio'></div>
<div class='idiv' data-num='1234567'><input name='selector' value='7' type='radio'></div>
<div class='idiv' data-num='12345678'><input name='selector' value='8' type='radio'></div>
<div class='idiv' data-num='123456789'><input name='selector' value='9' type='radio'></div>
<div class='idiv' data-num='123456789a'><input name='selector' value='a' type='radio'></div>

.idiv {
 position: relative;
 height: 30px;
 width: 30px;
}
//and now the ugly as sin part..
#hide[value="1"] ~ .idiv[data-num*= "1"] ,
#hide[value="2"] ~ .idiv[data-num*= "2"] ,
#hide[value="3"] ~ .idiv[data-num*= "3"] ,
#hide[value="4"] ~ .idiv[data-num*= "4"] ,
#hide[value="5"] ~ .idiv[data-num*= "5"] ,
#hide[value="6"] ~ .idiv[data-num*= "6"] ,
#hide[value="7"] ~ .idiv[data-num*= "7"] ,
#hide[value="8"] ~ .idiv[data-num*= "8"] ,
#hide[value="9"] ~ .idiv[data-num*= "9"] ,
#hide[value="a"] ~ .idiv[data-num*= "a"]  {
background-color: red;
}

Notes:

  • I am operating in an environment such that when a radio button is selected, the value of #hide is updated.
  • The collision of the name attributes between the radio buttons and hidden input is intentional and necessary for the previous bullet point to function. The ‘form’ is not submitted in traditional sense, and so the collision has no detrimental effect.
  • The number of divs will be a fixed value.
5

Hi there m_hutley,

here is one possible example…

https://codepen.io/coothead/full/YzXpxqr

…and the code…

https://codepen.io/coothead/pen/YzXpxqr

coothead

6

Except that will highlight just the div equal to the value, the target is the equal to and every value less than.

Based on that, though, i’m guessing there’s not going to be a… cleaner… way than the one i’ve got?

7

Sorry, butI must have have misunderstood your post. :wonky:

I thought that…

  1. only the radio button that was checked was to be highlighted.
  2. the <input type="hidden">'s value was to be set to that
    of the checked radio button.

…were your requirements. :winky:

coothead

8

the idea is that it’s an indicator of percentage, or a meter, so to speak.

If the third box is ‘ticked’ (IE: #hide contains the value 3), then boxes 1, 2 , and 3 should be red, to indicate the complete state of the indicator. (because you cant be on level 3, without also having passed levels 1 and 2)

9

Hi there m_hutley,

here is another possible example…

https://codepen.io/coothead/full/RwPoxzq

…and the code…

https://codepen.io/coothead/pen/RwPoxzq

coothead

2 Likes
10

I can’t see a shorter or cleaner way to do what you want in CSS only.

The version I came up with ending up being twice as long although it does colour the elements progressively based on the value and not reverse as in your example…

1 Like
11

Thanks guys, food for thought.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.