CSS Checkbox styling unique classes

Question

Is there a good way to select an input that has unique classes.

At the moment this will do...

input[type="checkbox"]:checked + label {....}

But what if I want to grab the label by the class name usethis? Code below -

<div class="checkbox">
   <input id="c1" class="rounded-input" type="checkbox" rel="performance" onchange="change()" />
   <label class="usethis" for="c1">Performance</label>
</div>

where have used the class name usethis ?

theFrontEndDev
– theFrontEndDev

2020-05-15 15:58:40 +00:00
Commented May 15, 2020 at 15:58 — theFrontEndDev
– theFrontEndDev, Commented May 15, 2020 at 15:58
I've edited my snippet its on the label

JordanMiguel
– JordanMiguel

2020-05-15 16:02:12 +00:00
Commented May 15, 2020 at 16:02 — JordanMiguel
– JordanMiguel, Commented May 15, 2020 at 16:02
It's not clear what it is you are trying to achieve.

Paulie_D
– Paulie_D

2020-05-15 16:58:36 +00:00
Commented May 15, 2020 at 16:58 — Paulie_D
– Paulie_D, Commented May 15, 2020 at 16:58

theFrontEndDev · Accepted Answer · 2020-05-15 16:10:12Z

1

See if this works

input[type="checkbox"]:checked + .usethis {
  color: red;
  font-size: 5rem;  // i have given some random styles here
}

This style will only come when the checkbox is checked, and if you have another checkbox in the page without the label having the class .usethis, this style wont be applied to those checkboxes

answered May 15, 2020 at 16:10

theFrontEndDev

9832 gold badges20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JordanMiguel Over a year ago

Awesome, I was concered that removing label in the selector would mess it up. Thanks

theFrontEndDev Over a year ago

Happ to help you

Collectives™ on Stack Overflow

CSS Checkbox styling unique classes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related