How to highlight label if checkbox is checked but set up is label first then input?

Question

Highlight label if checkbox is checked

A totally different set up from the above link.

set up 1:

<input type="checkbox" checked>
<label>Text</label>

answer:

input:checked + label { font-weight: bold; }

set up 2:

<label>Text</label>
<input type="checkbox" checked>

answer:

??

Answer 1

This is a hack.

• Begin with HTML element order reversed
• Wrap elements in flexbox
• Style as usual with + or ~
• Restore desired order via order: -1;
• Make sure to point that label to a valid id

.container {
  display: flex; 
}

[type=checkbox]:checked + label {
  color: red;
}

label {
  order: -1;
}

<div class="container">
  <input id="mycheckbox" type="checkbox" checked> 
  <label for="mycheckbox">Text</label>
</div>

jsFiddle