CODEWITHSUNDEEP
csssassbackground-color
arunmmanoharan
arunmmanoharan

Reputation: 2675

Change color of checkbox inside a nested div

I have a HTML node where the parent has a class "bp3-multi-select-popover". I want to access all checkboxes nested inside this parent and give a background-color of green. The checkboxes will always be inside an li. Please advice. I do not want to change it generally throughout my app. Only when the checkbox is under .bp3-multi-select-popover class

enter image description here

I need to change .bp3-control input:checked ! .bp3-control-indicator with a background of green.

This is what I did to change:

.bp3-multi-select-popover
  > div
  > div
  > ul
  > li
  > a
  > div
  > div
  > span.bp3-control
  input:checked
  ~ .bp3-control-indicator {
  background-color: green;
}

Please enlighten me on a way to fix this.

This is the link:CodeSandbox

Upvotes: 0

Views: 179

Answers (3)

Walter White
Walter White

Reputation: 1026

Try this

.bp3-control input:checked ~ .bp3-control-indicator {
  background-color: green !important;
}

https://h72uv.csb.app/

Upvotes: 0

arunmmanoharan
arunmmanoharan

Reputation: 2675

Got it:

.bp3-multi-select-popover
  .bp3-control
  input:checked
  ~ .bp3-control-indicator {
  background-color: green;
}

Thanks.

Upvotes: 0

Berk Kurkcuoglu
Berk Kurkcuoglu

Reputation: 1523

You do not need the full path which is prone to errors, you can just use the last bit of the selector:

.bp3-multi-select-popover .bp3-control input:checked ~ .bp3-control-indicator {
  background-color: green;
}

Updated sandbox

Upvotes: 1

Related Questions