CODEWITHSUNDEEP
htmlcss
Æthenwulf
Æthenwulf

Reputation: 220

CSS does not recognize child class

I found a code that work on codepen but not on my project, i'm confuse on how things working on CSS because it's my first time trying to explore CSS.

here is the code:

-HTML

    <label for="choice-dollar">Change Password?</label>
    <input type="checkbox" name="choice-dollar" id="choice-dollar">
    <div class="reveal-if-active">
        <div class="row">
            <div class="col-lg-6 col-md-6">
                <div class="form-group">
                    <label asp-for="@Model.NewPassword" class="form-label"></label>
                    <input asp-for="@Model.NewPassword" class="form-control">
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="form-group">
                    <label asp-for="@Model.ConfirmPassword" class="form-label"></label>
                    <input asp-for="@Model.ConfirmPassword" class="form-control">
                </div>
            </div>
        </div>
    </div>

-CSS

.reveal-if-active {
 opacity: 0;
 max-height: 0;
 overflow: hidden;
 font-size: 16px;
 transform: scale(0.8);
 transition: 0.5s;
 input[type="checkbox"]:checked ~ & {
   opacity: 1;
   max-height: 100px;
   padding: 10px 20px;
   transform: scale(1);
   overflow: visible;
 } 
}

The code seam to work but the problem part is on CSS the input[type="checkbox"]:checked ~ & Visual studio does not recognize this line as it should be, what am i lacking?

enter image description here

but works perfectly fine here on codepen https://codepen.io/chriscoyier/pen/LEGXOK

Upvotes: 0

Views: 106

Answers (1)

yaiks
yaiks

Reputation: 640

Like @Amadan said, this is not valid CSS. It is working on codepen probably because it is using some kind of CSS pre-processor such as SASS/LESS/Stylus.

For this code to work, you should declare the CSS like this:

.reveal-if-active {
 opacity: 0;
 max-height: 0;
 overflow: hidden;
 font-size: 16px;
 transform: scale(0.8);
 transition: 0.5s;
}

 input[type="checkbox"]:checked + .reveal-if-active {
   opacity: 1;
   max-height: 100px;
   padding: 10px 20px;
   transform: scale(1);
   overflow: visible;
 }

The + selector gets the element right after the checkbox, which in this case is the div

update

Given @Amadan's input, you could mantain the selector used in the example.

 input[type="checkbox"]:checked ~ .reveal-if-active {
   opacity: 1;
   max-height: 100px;
   padding: 10px 20px;
   transform: scale(1);
   overflow: visible;
 }

Upvotes: 1

Related Questions