How to Check multiple element class with jQuery or CSS

Question

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.

DEN DEN G · Accepted Answer · 2022-07-02 15:59:05Z

1

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!

answered Jul 2, 2022 at 15:59

DEN DEN G

312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Check multiple element class with jQuery or CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related