Clever Geek Handbook

Hard to understand: after CSS selector

According to http://www.w3schools.com/cssref/sel_after.asp , after the selector, something is included after each element. I understand that perfectly. But I only found on the internet a css slider, this one: link where is this piece of code

.slider label:after {
    border-radius: 100%;
    bottom: -.2em;
    box-shadow: inset 0 0 0 .2em #111,
                inset 0 2px 2px #000,
                0 1px 1px hsla(0,0%,100%,.25);
    content: '';
    left: -.2em;
    position: absolute;
    right: -.2em;
    top: -.2em;
}

Makes the selected image color of the radio circle white. Shouldn't they be inserted after every label inside the .slider? Why does this only apply to the chosen one?

+3


source to share


2 answers


Of course your understanding is correct. But slider specific, it also has CSS rules.

.slider input:checked + label {
  background-color: #fff;
}


The above code works like: If the checkbox is checked, add a background color for the sibling (+) element which is the label

+2


source


It applies to every label, not just the selected one.

Open the demo page: http://codepen.io/joshnh/full/KwilB



Right-click the slider and select Inspect Element and locate the element ul class="slider"

.

Check label

under each element li

and notice the ::after

DOM node that was generated by this CSS rule. It is present on all labels.

+1


source






More articles:


All Articles