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
Post a Comment