html - How do I use CSS attribute selector with the adjacent selector? -


for following css how collectively use attribute , adjacent selector?

.onoff-checkbox:checked + .onoff-label .onoff-inner {margin-left: 0;} .onoff-checkbox:checked + .onoff-label .onoff-switch {right: 0px;} 

i using create css toggle style check-boxes, , want have more 1 checkbox on page? following html code (example):

<input type="checkbox" name="onoff" class="onoff-checkbox-1" id="myonoff" checked> ... <input type="checkbox" name="onoff" class="onoff-checkbox-2" id="myonoff" checked> 

i have tried following -

input[class*="onoff-checkbox"]:checked + label[class*="onoff-label"] span[class*="onoff-inner"] ... 

what correct syntax. help.

here code try out - https://jsfiddle.net/vedanta_/8z3sqatf/ original code adapted - https://proto.io/freebies/onoff/

you can't use same id more 1 element. use myonoff1 , myonoff2.

then can access css this

#myonoff1 {     ... }  #myonoff2 {     ... } 

and in jquery, can use this:

$('#myonoff1').show(); // or other method. 

also, instead of using div[class*="onoff"] {, can stick pattern class elements share. example, in html, use class="onoff-checkbox" , in css use .onoff-checkbox { ... }


Comments

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

gradle error "Cannot convert the provided notation to a File or URI" -

python - NameError: name 'subprocess' is not defined -