How can I modify my CSS to require a class instead of a “+ label”?

Question

I have the following:

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; font-size: 16px; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f046"; font-size: 16px;} /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */

How can I change this so that instead of requiring a label before I just need to add a class called "facheck" to the inputs

Answer 1

You should add class on lable element if you don't want to use sibling selector:

.unchecked {
  content: "\f096"; font-size: 16px;
  letter-spacing: 10px;
}

.checked {
  content: "\f046"; font-size: 16px;
  letter-spacing: 5px;
}

And then in your HTML:

<label class="unchecked"></label>

and

<label class="checked"></label>

I think there is no other way to do that without siblings selector (+). This is what a css says: 'When checkbox is unchecked style following label with this style...'