CSS breaking when wrapping element in new div (sibling selector)

Question

I have the following HTML and CSS selector chain:

<div className="form-group">
    <div class="control-custom-checkbox position-relative">
        <input type="checkbox" class="custom-input" id="check1" checked>
        <label className="custom-label" htmlFor="check1"></label>
    </div> 
</div>

.control-custom-checkbox .custom-input:checked~.custom-label::after { }

Next I added another div into the HTML:

<div class="form-group">
    <div class="control-custom-checkbox position-relative">
       <div class="required">
          <input type="checkbox" class="custom-input" id="check1" checked>
       </div> 
       <label class="custom-label" htmlFor="check1"></label>   
    </div>
</div>

I wrapped the markup in a new <div class="required"> and my styles broke. How should I change my CSS selector?

What are you trying to achieve? Did you forget to wrap your CSS in `` tags or was that merely for display purposes? — Constantin Groß, Apr 08 '19 at 12:12
And what exactly are you trying to achieve, and how is it failing? — Constantin Groß, Apr 08 '19 at 12:13
@Michael Kostiuchenko What do you want to change in this form by using css selector. — Arshiya Khanam, Apr 08 '19 at 12:18
@Arshiya Khanam I use custom checkbox styles. This selector is responsible for styling the checked checkbox. — Mikhail Kostiuchenko, Apr 08 '19 at 12:21
See this link https://codepen.io/arshiyakhanam_786/pen/gywVVm — Arshiya Khanam, Apr 08 '19 at 12:24
Check this one https://codepen.io/arshiyakhanam_786/pen/gywVVm — Arshiya Khanam, Apr 08 '19 at 12:33
Could you just add the `required` class to one of the already existing elements? This seems easier and doesn't require you to make major changes. What does adding an additional element get you here? — Chris Barr, Apr 08 '19 at 12:55

score 2 · Answer 1 · answered Apr 08 '19 at 12:17

2

To keep it work, how it was before another div, you didn't need to change anything in your selector - it still will work and target needed HTML element.

You can check it there: https://codepen.io/anon/pen/BELXqW

answered Apr 08 '19 at 12:17

Volodymyr Humeniuk

3,411
9
35
70

but what if `` tag is not wrapped in a `
`? Should I change something in the selector?
– Mikhail Kostiuchenko Apr 08 '19 at 12:29
2

You can't "walk back" in the DOM. They should be on the same nesting level. You can use HTML attribute `required` if you need to validate input. – Volodymyr Humeniuk Apr 08 '19 at 12:33

ChrisM · Accepted Answer · 2019-04-08T13:05:16.777

The problem was your use of the 'sibling selector' in your CSS selector (~).

This requires that your .custom-label element be a sibling (i.e. next to each other within the DOM tree) of the .custom-input element. When you added the extra div it broke that relation (they were no longer 'next to' each other) so it broke your styling. (The fact that the div had the required class is irrelevant).

There aren't one size fits all fixes for this kind of issue but the safest fix would probably be to adjust the HTML so that they continue to be siblings.

<div class="form-group">
      <div class="control-custom-checkbox position-relative">
          <div class="required">
              <input type="checkbox" class="custom-input" id="check1" checked>
              <label class="custom-label" htmlFor="check1"></label>
          </div> 
      </div> 
  </div>

(Or, as suggested in a comment, just add required onto an existing wrapper.)

If, however, that is not a possibility for some reason. You may be able to get away with removing the sibling selector requirement. E.g.

.control-custom-checkbox .custom-label::after {
    /* Your CSS here */
}

Of course that selector may have been put there for a reason and removing it may have unintended side effects, especially if this will affect a large codebase. You will have to judge for yourself if it is safe to remove that sibling selector. I imagine it should be fine if .control-custom-checkbox always contains HTML structured just like your example, but there's no way to be sure without knowing more about the project.

CSS breaking when wrapping element in new div (sibling selector)

2 Answers2