How can I change the number of element tc4? When the previous two elements had a hidden class.
this my code:
<style>
:before{
display:block;
margin-top:10px;
font: inherit;
}
.tc-hidden{
display:none;
}
.tc1 h3.tm-section-label:before {
content: "1";
}
.tc2 h3.tm-section-label:before {
content: "2";
}
.tc3 h3.tm-section-label:before {
content: "3";
}
.tc4 h3.tm-section-label:before {
content: "4";
}
.tc2.tc-hidden ~ .tc3 h3.tm-section-label:before {
content: "2";
font: inherit;
}
.tc3.tc-hidden ~ .tc4 h3.tm-section-label:before {
content: "3";
font: inherit;
}
.tc2.tc-hidden .tc3.tc-hidden ~ .tc4 h3.tm-section-label:before {
content: "2";
font: inherit;
}
</style> <div class="tc-cell tc1">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc2 tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc3 tc-hidden">
<h3 class="tm-section-label"></h3>
</div>
<div class="tc-cell tc4">
<h3 class="tm-section-label"></h3>
</div>TC4 element must show the number 2. But now it shows the number 3.
It doesn't matter if this code is done with css or jQuery.
Your selectors are all messed up, some are targeting no element at all. with your code you can achieve what you want by adding a single comma.
.tc2.tc-hidden, .tc3.tc-hidden ~ .tc4 h3.tm-section-label:before {
content: "2";
font: inherit;
}
you might want to read more on css rules though, and keep it simple too!