CODEWITHSUNDEEP
htmlcsscss-selectors
Vedanta Barooah
Vedanta Barooah

Reputation: 11

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

For the following CSS how do I collectively use the attribute and adjacent selector? 

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

I am using this to create CSS toggle style check-boxes, and would want to have more then one checkbox on the page? with the 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 the following - 

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

What is the correct syntax. Thanks for any help.

Here is the code to try out - https://jsfiddle.net/vedanta_/8z3sqatf/ Original code adapted from - https://proto.io/freebies/onoff/

Upvotes: 1

Views: 80

Answers (2)

Chad
Chad

Reputation: 5418

In this example, I think you're confused as to what has to be unique.

(Someone correct me if I'm wrong), but I believe that the element's id should be the same as the element's name, and those are unique identifiers for the input element. The label's for attribute should reflect those exactly. Regardless, elements cannot share an id, nor can they share a for attribute.

The classes can absolutely be shared among input elements-- they don't have to be unique. So to go about this, I've fixed up your markup a little bit.

div[class*="onoff"] {
    position: relative;
    width: 90px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
}
input[class*="onoff-checkbox"] {
    display: none;
}
label[class*="onoff-label"] {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #999999;
    border-radius: 20px;
}
span[class*="onoff-inner"] {
    display: block;
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}
span[class*="onoff-inner"]:before, span[class*="onoff-inner"]:after {
    display: block;
    float: left;
    width: 50%;
    height: 30px;
    padding: 0;
    line-height: 30px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
span[class*="onoff-inner"]:before {
    content:"Yes";
    padding-left: 10px;
    background-color: #34A7C1;
    color: #FFFFFF;
}
span[class*="onoff-inner"]:after {
    content:"No";
    padding-right: 10px;
    background-color: #EEEEEE;
    color: #999999;
    text-align: right;
}
span[class*="onoff-switch"] {
    display: block;
    width: 18px;
    margin: 6px;
    background: #FFFFFF;
    border: 2px solid #999999;
    border-radius: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 56px;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}
input[class*="onoff-checkbox"]:checked {
    margin-left: 0;
}
label[class*="onoff-label"] {
    margin-left: 0;
}
span[class*="onoff-inner"] {
    margin-left: 0;
}
input[class*="onoff-checkbox"]:checked {
    right: 0px;
}
label[class*="onoff-label"] {
    right: 0;
}
span[class*="onoff-inner"] {
    right: 0;
}
input.onoff-checkbox:checked + label.onoff-label span.onoff-switch {
    right: 5px;
}
<div class="onoff">
    <input type="checkbox" name="onoff" class="onoff-checkbox" id="onoff" checked="true" />
    <label class="onoff-label" for="onoff"> 
        <span class="onoff-inner"></span>
        <span class="onoff-switch"></span>            
    </label>
</div>
<br/>
<div class="onoff2">
    <input type="checkbox" name="onoff2" class="onoff-checkbox" id="onoff2" checked="true" />
    <label class="onoff-label" for="onoff2">
        <span class="onoff-inner2"></span>
        <span class="onoff-switch"></span>                
    </label>
</div>

The main thing in the CSS to focus on is this line:

input.onoff-checkbox:checked + label.onoff-label span.onoff-switch {
    right: 5px;
}

This targets an element with the class of .onoff-checkbox and then applies styles based on the value of that.

You can see this in a working JSFiddle.

Upvotes: 1

bytecode77
bytecode77

Reputation: 14840

You can't use the same id for more than one element. You could use myonoff1 and myonoff2.

Then you can access it with CSS like this

#myonoff1
{
    ...
}

#myonoff2
{
    ...
}

And in jQuery, you can use this:

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

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

Upvotes: 1

Related Questions