scss first child, after sudo class

user_13319982 0
Viewed 283

I want to select the first child of the form-radio-label element. I know already know this works perfectly:

.form {
  &-radio-input:checked ~ &-radio-label &-radio-button::after {
    opacity: 1;
  }
}

But why doesn't work with &-radio-input:checked ~ &-radio-label &:first-child::after?

HTML:

<div class="form-group">
                  <div class="form-radio-group">
                    <input type="radio" class="form-radio-input" id="small" name="size" />
                    <label for="small" class="form-radio-label">
                      <span class="form-radio-button"></span>
                      Small tour group
                    </label>
                  </div>

                  <div class="form-radio-group">
                    <input type="radio" class="form-radio-input" id="large" name="size" />
                    <label for="large" class="form-radio-label">
                      <span class="form-radio-button"></span>
                      Large tour group
                    </label>
                  </div>
                </div>
sass css-selectors css html
2 Answers

CSS is only working descending btw. up to down and not from child/following to parent/above elements. Additonal pseudo classes has to be added to the whanted elements itself. They are just looking if the named element is i.e. the first-child. For explanation I use CSS output as it is easier to understand:



//#### Working Example
.form-radio-input:checked ~ .form-radio-label .form-radio-button::after

--> .form-radio-label and .form-radio-label 
    are descending to the classes named before 
    (the elements are descending to the elements before)
    so they will be found by CSS
--> .form-radio-button::after
    names pseudo class of the whanted element direct
    so it is added direct to the wanted element



//#### NOT Working Example 1
.form-radio-input:checked ~ .form-radio-label .form:first-child::after
--> .form-radio-label is descending to .form-radio-input
    so this will be found
--> .form IS NOT descending element to .form-radio-label (but parent)
    so css will not find it



//#### NOT Working Example 2
.form-radio-input:checked ~ .form-radio-label:first-child::after
--> .form-radio-label:first-child::after
    means: a element with this class which itself is first child 
    but that is not the element you are looking for
    you are looking for the first child IN element .form-radio-label
    and that is span.form-radio-button:first-child
    which you have selected in working example
user_92684850

You already given a class for the first child so you can do this by using that class. But if you want to use :first-child selector I am given an example of that. I hope it will be helpful for you

.form-radio-group{
.form-radio-input {
.form-radio-label {
.form-radio-button {
      opacity:1;
}
}
}   
}
//OTHERWISE FOR CSS SELECTOR
.form-radio-group{
.form-radio-input {
.form-radio-label{
.form-radio-button:first-child::after {
    content:"";
    position:absolute;
      opacity:1;
}
}
}   
}
user_153474940
Related