Multiple css atribute selector with after or before pseudoclass - html

Question

I'm trying creating custom check-box it two variants: one for multiple check-boxes and another style for single check-box (on/off). In CSS, when I'm trying to select only elements with proper class (for second case), nothing happens. For sure I do mistake in CSS statement below, but what kind of? Thanks!
input[type="checkbox"][class="toggle"]:not(:checked) + label:before,
input[type="checkbox"][class="toggle"]:checked + label:before {
background: red;
}
/*CHECKBOX STYLING*/
/*font styling*/
/* Base for label styling */
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
position: relative;
padding-left: 42px;
cursor: pointer;
font-size: 16pt;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 0px;
width: 22px; height: 22px;
border: 2px solid #d7d6d5;
border-radius: 4px;
background: #f1f5f8;
}
[type="checkbox"]:checked + label:before{
border-color: #555555;
}
input[type="checkbox"][class="toggle"]:not(:checked) + label:before,
input[type="checkbox"][class="toggle"]:checked + label:before {
background: red;
}
/*checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '\e909';
font-family: 'icomoon';
position: absolute;
top: 8px; left: 4px;
font-size: 10pt;
line-height: 0.8;
color: #555555;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
<div class="checkbox">
<form action="#">
<p>
<input id="check1" type="checkbox" name="check" checked="checked" >
<label for="check1">Checked value</label>
</p>
<p>
<input id="check2" type="checkbox" name="check"">
<label for="check2">Unchecked value</label>
</p>
<p>
<input id="check3" type="checkbox">
<label for="check3" class="toggle">Only two values</label>
</p>
</form>
</div>

Answer 1

The class is present in <label>, not <input>, So you should add the class selector with the <label>.
input[type="checkbox"]:not(:checked) + label.toggle:before,
input[type="checkbox"]:checked + label.toggle:before {
background: red;
}
It is better to use the . operator to match elements having particular class since the attribute selector [class="toggle"] will only match elements strictly having just toggle class
/*CHECKBOX STYLING*/
/*font styling*/
/* Base for label styling */
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
position: relative;
padding-left: 42px;
cursor: pointer;
font-size: 16pt;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0px;
width: 22px;
height: 22px;
border: 2px solid #d7d6d5;
border-radius: 4px;
background: #f1f5f8;
}
[type="checkbox"]:checked + label:before {
border-color: #555555;
}
input[type="checkbox"]:not(:checked) + label.toggle:before,
input[type="checkbox"]:checked + label.toggle:before {
background: red;
}
/*checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '\e909';
font-family: 'icomoon';
position: absolute;
top: 8px;
left: 4px;
font-size: 10pt;
line-height: 0.8;
color: #555555;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
<div class="checkbox">
<form action="#">
<p>
<input id="check1" type="checkbox" name="check" checked="checked">
<label for="check1">Checked value</label>
</p>
<p>
<input id="check2" type="checkbox" name="check">
<label for="check2 ">Unchecked value</label>
</p>
<p>
<input id="check3 " type="checkbox">
<label for="check3 " class="toggle ">Only two values</label>
</p>
</form>
</div>