Why CSS pseudo class isn’t working?

Question

I have to need hover effects will work on the CSS pseudo :checked class, but somehow it isn’t working.

Can any one help me with pseudo class?

.llcategory-colorfilter {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}
.llcategory-colorfilter span {
  position: relative;
  transition: all 0.6s ease;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin: 1%;
}
.llcategory-colorfilter span input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.llcategory-colorfilter span + input[type="checkbox"]:checked + span {
  border: 2px solid rebeccapurple;
  transform: scale(1.2);
}
.llcategory-colorfilter span:hover {
  transform: scale(1.2);
}
.llcategory-colorfilter .cf1 {
  background: darkred;
}
.llcategory-colorfilter .cf2 {
  background: olivedrab;
}
.llcategory-colorfilter .cf3 {
  background: orangered;
}
.llcategory-colorfilter .cf4 {
  background: greenyellow;
}
.llcategory-colorfilter .cf5 {
  background: deepskyblue;
}
.llcategory-colorfilter .cf6 {
  background: #38c4bf;
}
.llcategory-colorfilter .cf7 {
  background: yellow;
}
.llcategory-colorfilter .cf8 {
  background: #d62e78;
}
.llcategory-colorfilter .cf9 {
  background: #ce2b2b;
}
.llcategory-colorfilter .cf10 {
  background: tomato;
}
.llcategory-colorfilter .cf11 {
  background: olivedrab;
}
.llcategory-colorfilter .cf12 {
  background: #239524;
}
.llcategory-colorfilter .cf13 {
  background: #564aba;
}
.llcategory-colorfilter .cf14 {
  background: #0b285a;
}
.llcategory-colorfilter .cf15 {
  background: #6f27b4;
}
.llcategory-colorfilter .cf16 {
  background: #38c4bf;
}
.llcategory-colorfilter .cf17 {
  background: antiquewhite;
}
.llcategory-colorfilter .cf18 {
  background: #d62e78;
}
.llcategory-colorfilter .cf19 {
  background: #ce2b2b;
}
.llcategory-colorfilter .cf20 {
  background: #3d6cbf;
}

<div class="llcategory-colorfilter">
  <span class="cf1">
                            <input type="checkbox" name="">
                        </span>
  <span class="cf2">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf3">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf4">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf5">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf6">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf7">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf8">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf9">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf10">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf12">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf13">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf14">
                             <input type="checkbox" name="">
                        </span>
  <span class="cf15">
                             <input type="checkbox" name="">
                        </span>
</div>

Not working *how*? Questions seeking debugging help (“**why isn’t this code working?**”) must include the desired behavior, a *specific problem or error* and *the shortest code necessary* to reproduce it **in the question itself**. Questions without **a clear problem statement** are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example.](http://stackoverflow.com/help/mcve). — elixenide, Jul 24 '18 at 06:21
Just need to work, style can be add later, example for, you can add border or scale — Momin, Jul 24 '18 at 06:28
`.llcategory-colorfilter span + input[type="checkbox"]:checked + span` this selector will not work. Have a look [here](https://css-tricks.com/almanac/selectors/a/adjacent-sibling/). — Huelfe, Jul 24 '18 at 06:34

score 3 · Answer 1 · answered Jul 24 '18 at 06:35

3

There isn't an input next to a span in your whole code. span + input this selector expects something like this

<span></span><input>

Your input is inside a span so your selector is never present on your page. Either restructure your HTML to match the selector or change the selector to match the HTML, like so:

span > input:checked

The last part of your selector also can't be true in your html, there is never a span next to a input field. For the + span to work you would need something like this:

<input> <span></span>

answered Jul 24 '18 at 06:35

cloned

4,562
3
18
31

Could you fix on my code example? – Momin Jul 24 '18 at 06:39
There is no way we can fix your code example without knowing what you want to do. Ed Cottrell also pointed this out in his first comment to your post. I posted two ways on how to fix your code in my answer, if this doesn't help you you need to tell us exactly what you want to achieve and what you tried till now. – cloned Jul 24 '18 at 07:35
just want to when click(:checked) color box have border or scale(1.2). – Momin Jul 24 '18 at 07:39

Why CSS pseudo class isn’t working?

1 Answers1