Are you a class superscript?

Asked

Viewed 74 times

0

I have the following css:

@charset "utf-8";
/* CSS Document */

.divCheckBox {
    width: 140px;
    height: 34px;
}
.divCheckBox .valor {
    display: inline-block;
    line-height: 34px;
    top: 0;
}
.divCheckBox .checkBox {
    display: none;
}
.divCheckBox .labelCheckBox {
    width: 60px;
    height: 34px;
    background-color: #CCC;
    display: block;
    cursor: pointer;
    border-radius: 34px;
    display: inline-block;
}
.divCheckBox .labelCheckBox:before {
    width: 26px;
    height: 26px;
    margin: 4px;
    background-color: #FFF;
    content: "";
    display: inline-block;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
    vertical-align: middle;
}
.divCheckBox .checkBox:checked + .divCheckBox .labelCheckBox {
    background-color: blue;
}
.divCheckBox .checkBox:checked + .divCheckBox .labelCheckBox:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

And the following html

<!DOCTYPE html>
<html>
<head>
<title>CheckBox Round</title>
<link type="text/css" rel="stylesheet" href="_css/checkBoxRound.css" />
</head>
<body>
<form action="?" method="post">
  <div class="divCheckBox">
    <label class="valor">SIM</label>
    <input type="checkbox" name="ca" id="ca" class="checkBox">
    <label for="ca" class="labelCheckBox"></label>
    <label class="valor">NÃO </label>
  </div>
  <br />
  <input type="submit">
</form>
</body>
</html>

When I spin, and I click on the labelCheckBox, technically I should change its color to blue and the inner ball run to the right. But it’s not happening.

However, although the class name is correct, in case I withdraw 

.divCheckBox

Of the structure below

.divCheckBox .checkBox:checked + .divCheckBox .labelCheckBox {
    background-color: blue;
}
.divCheckBox .checkBox:checked + .divCheckBox .labelCheckBox:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

Staying,

.checkBox:checked + .labelCheckBox {
    background-color: blue;
}
.checkBox:checked + .labelCheckBox:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

So it works.

Where is that mistake?

css css3

1 answer

1


The selector + is to select the next "brother" element. In this case, the way you mounted the interpreter read:

.divCheckBox .checkBox:checked + .divCheckBox .labelCheckBox

Select all elements with the class .divCheckBox, then select all descendants with the class .checkBox and who are with :checked, then look for the next brother (+) which contains the class .divCheckBox (it was here that you made the mistake), and then look for the descendants with the class .labelCheckBox.

I mean, from your HTML, there’s no such brother .divCheckBox of .checkBox.

To correct this, just remove the second .divCheckBox. Below is your corrected example:

.divCheckBox {
    width: 140px;
    height: 34px;
}
.divCheckBox .valor {
    display: inline-block;
    line-height: 34px;
    top: 0;
}
.divCheckBox .checkBox {
    display: none;
}
.divCheckBox .labelCheckBox {
    width: 60px;
    height: 34px;
    background-color: #CCC;
    display: block;
    cursor: pointer;
    border-radius: 34px;
    display: inline-block;
}
.divCheckBox .labelCheckBox:before {
    width: 26px;
    height: 26px;
    margin: 4px;
    background-color: #FFF;
    content: "";
    display: inline-block;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
    vertical-align: middle;
}
.divCheckBox .checkBox:checked + .labelCheckBox {
    background-color: blue;
}
.divCheckBox .checkBox:checked + .labelCheckBox:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
<!DOCTYPE html>
<html>
<head>
<title>CheckBox Round</title>
<link type="text/css" rel="stylesheet" href="_css/checkBoxRound.css" />
</head>
<body>
<form action="?" method="post">
  <div class="divCheckBox">
    <label class="valor">SIM</label>
    <input type="checkbox" name="ca" id="ca" class="checkBox">
    <label for="ca" class="labelCheckBox"></label>
    <label class="valor">NÃO </label>
  </div>
  <br />
  <input type="submit">
</form>
</body>
</html>

  • That’s right. Thank you very much.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.