separate styles for check box CSS - html

Question

independent styles
I have this problem, at the moment of applying the styles they are applied in all the checboxes that are found, I only think that the styles of each checkbox are applied independently and that only 1 can be selected
<style media="screen">
/* Hide the checkbox */
form p {
position: relative; /* allows to position the checkbox */
}
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
/* Hide the checkbox without
making it hidden for the
screen readers */
position: absolute;
left: 0;
opacity: 0.01;
}
/* Preparing the label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative; /* allows to position the custom boxes */
padding-left: 2.3em; /* space for upcoming boxes */
font-size: 1.05em;
line-height: 1.7;
cursor: pointer;
}
/* Box aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.4em;
height: 1.4em;
border: 1px solid #aaa;
background: #FFF;
border-radius: .2em;
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
transition: all .275s;
}
/* Check aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: 'X';
position: absolute;
top: .38em;
left: .18em;
font-size: 1.6em;
color: #CB22ED;
line-height: 0;
transition: all .2s; /* Little transition */
}
/* Unchecked aspect */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0) rotate(45deg);
}
/* Checked aspect */
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1) rotate(0);
}
</style>
<p>
<input type="checkbox" class="check" id="test1" />
<label for="test1" aria-describedby="label">YES</label>
</p>
<p>
<input type="checkbox" id="test2" />
<label for="test2" aria-describedby="label">NO</label>
</p>
As shown in the example, the styles appear for everyone but I only wish that each one had its content. I expect answers and thank you for your attention.

Answer 1

What you are doing is targeting the HTML attribute <input> with the type of type="checkbox". Therefore, any of those you have on the page will be targeted. However, you can override input[type="checkbox"] with an ID. To define an ID, simply put, on your HTML page. On each HTML tag like <input> or <p> or even <textarea> you can add an ID like this <input id="thisIsWhateverYouWant" type="checkbox"> same goes for the others. To write it in CSS, inside the <style> tags you can write something like this #thisIsWhateverYouWant {height: 100%; width: 100%} Those styles will override what you have.
Here is a reference to what overrides what. Check this out