0

I have the following situation which i want to solve with only CSS:

<input id="input_1" class="input_c" data-filter="data_x1" type="checkbox" />
<input id="input_2" class="input_c" data-filter="data_x2" type="checkbox" />
<input id="input_3" class="input_c" data-filter="data_x3" type="checkbox" />

<div class="sibling">
    <div class="child-sibling">
        <label class="label_1" for="input_1">
            <span class="checkmark" data-filter="data_x1"></span>
        </label>
        <label class="label_2" for="input_2">
            <span class="checkmark" data-filter="data_x2"></span>
        </label>
        <label class="label_3" for="input_3">
            <span class="checkmark" data-filter="data_x3"></span>
        </label>
    </div>
    <div class="child-sibling">
        <label class="label_1" for="input_1">
            <span class="checkmark" data-filter="data_x1"></span>
        </label>
        <label class="label_2" for="input_2">
            <span class="checkmark" data-filter="data_x2"></span>
        </label>
        <label class="label_3" for="input_3">
            <span class="checkmark" data-filter="data_x3"></span>
        </label>
    </div>
</div>

What I want to achieve is that when a label is clicked, the spans in the correct labels change layout. So if I click any "label_1", the spans in both the "label_1" are changed.

What I had in mind is the following (add this line for each different data-filter in css):

[data-filter="{{ name of data-filter}}"]:checked + .sibling [data-filter="{{ name of data-filter}}"]  {
    background: yellow;
}

When I do this, only label_3 works correctly.

I was also wondering if the above line could be generalized to one line with a css variable (if that even exists), so that if both data-filters match, with a checked box, the background turns yellow:

[data-filter=$var]:checked + .sibling [data-filter=$var] { 
    background: yellow
}

Thanks!

Johan
  • 39
  • 1
  • 2
  • replace `+` with `~` – Temani Afif Jun 30 '18 at 15:23
  • As @Temani says, [demo](https://jsfiddle.net/davidThomas/ofker0w4/). – David Thomas Jun 30 '18 at 15:24
  • Wauw, that's an easy fix... It works, thanks! – Johan Jun 30 '18 at 15:25
  • 1
    And a general css line? So if you have 100 checkboxes, you don't need to have 100 lines in css. – Johan Jun 30 '18 at 15:26
  • @Temani: while aspects of this question have previously been answered, I don't believe the question is (entirely) a dupe, given the closing question: "*I was also wondering if the above line could be generalized...*" Johan: I'd suggest rewriting your question to make that the focus, given that the initial part of the question is, definitely, a duplicate. (This is why SO typically doesn't 'like' multiple smaller questions being asked as part of a larger question.) – David Thomas Jun 30 '18 at 15:27
  • @DavidThomas true but I think you agree that his last question is clearly a No .. such thing cannot be done with CSS and the most part of his question was related to the selector issue ... By the way, if he edit the question to highlight that part I will reopen it ;) – Temani Afif Jun 30 '18 at 15:31
  • 1
    @Temani: I agree fully; though I already reopened the question without thinking it through. Ah well, my mistake: closed again (pending update). – David Thomas Jun 30 '18 at 15:34
  • @Johan [CSS variable exists](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) but you cannot use them inside the selector like you want, so the answer is simply : no you cannot do this with one CSS line but since you are using SASS, you don't have to bother your self as it will get generated for you – Temani Afif Jun 30 '18 at 15:45

0 Answers0