Class overriding?

Question

Class overriding?

Navigation

#1 by (1 votes)

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 squeeze, and click on the labelCheckBox, I should technically change its color to blue and the ball inside run to the right. But it's not happening.

However, although the class name is correct, if I remove it

.divCheckBox

From 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);
}

Getting,

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

Then it works.

Where will this error be?

css css3

asked by anonymous 01.09.2017 / 17:30

1 answer

How to create directory and upload file Findall using ElementTree does not return expected result

score 1 · Accepted Answer

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 class .divCheckBox , then select all descendants with class .checkBox and that are with :checked , then look for the next sibling ( + ) that contains class .divCheckBox (this is where you made the mistake), and then look for the descendants with the .labelCheckBox class.

That is, because of your HTML, there is no such brother .divCheckBox of .checkBox .

To fix this, just remove the second .divCheckBox . Here 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>