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

How do I use the attribute and adjacent selector collectively for the following CSS?

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

I'm using it to create a CSS Toggle style check box, and would like to get one more checkbox on the page? The following HTML code (with examples):

  & lt; Input type = "checkbox" name = "onoff" class = "onoff-checkbox-1" id = "myonoff" checked & gt; ... & lt; Input type = "checkbox" name = "onoff" class = "onoff-checkbox-2" id = "myonoff" checked & gt; I have tried the following -  
  Input [class * = "onoff-checkbox"]: Czech + label [class * = "onoff- Label "] duration [class * =" onof-inner "] ...  
 
 What is the correct syntax Thank you for any help. 
 
 Here is the code to look for - Optimized with the original code - 
 

You can use the same id for more elements than you can use myonoff1 and myonoff2 .

Then you can access it with CSS

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

And in jQuery, you can use it:

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

Additionally, instead of using div [class * = "onoff"] {, you can specify the pattern You can stick with those that share the elements. For example, in your HTML, you use class = "onoff-checkbox" and in the CSS you can see the .onoff-checkbox {...}