https://stackoverflow.com/questions/23627762
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian
Your CSS has two errors.
First, you should select unchecked checkbox like this:
input:not(:checked)
and not relying on a fallback in rules application.
Second and more important, the rule td input:checked + table > tbody td is wrong.
Infact, if you have your outer checkbox checked but the nested one unchecked, that rule will still match nested table td because the first part td input:checked + table > tbody matches the outer table body and then the second part td looks for td that have that body as ancestor.
You should check for direct children instead.
Summing up, you can change your css to something like this:
*, html {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
body, form, ul, li, p, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
body {
background-color: #fafafa;
color: rgba(0, 0, 0, 0.7);
margin: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/**
* Tree Table CSS
**/
.table-tree {
display: block;
padding: 30px 0 0 30px;
}
td {
display: block;
position: relative;
}
td label {
background: url(http://www.webmasters.by/images/articles/css-tree/folder-horizontal.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
width: 100%;
}
td input {
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
// CHANGED HERE
td input:not(:checked) + table {
background: url(http://www.webmasters.by/images/articles/css-tree/toggle-small-expand.png) -3px -1px no-repeat;
margin: -0.938em 0 0 0;
height: 1em;
width: 1em;
}
td input:checked + table {
background: url(http://www.webmasters.by/images/articles/css-tree/toggle-small.png) 41px 4px no-repeat;
display: block;
margin: -1.25em 0 0 -44px;
padding: 1.25em 0 0 80px;
height: auto;
width: 100%;
}
td.file {
margin-left: -1px !important;
}
// CHANGED HERE
td input:not(:checked) + table > tbody > tr > td {
display: none;
margin-left: -14px !important;
padding-left: 1px;
}
// CHANGED HERE
td input:checked + table > tbody > tr > td {
display: block;
margin: 0 0 0.125em;
}
// CHANGED HERE
td input:checked + table > tbody > tr > td:last-child {
margin: 0 0 0.063em; /* 1px */
}
Always use the most specific CSS rule you can because when HTML gets huge you can have some surprises.
