CSS sibling selector not working as expected - html

Question

I am trying to use CSS sibling selectors but seems that they are not working as per rule.
Basically, i am using panel from bootstrap and trying to change panel-heading css via rules.
I have created a similar markup to replicate the issue and Below is the JS Fiddle link for same
Link to JS Fiddle
I have also tried with below css:
.collpase + .heading{
opacity: 0.2
}
.collpase.in + .heading{
opacity: 1
}
Any ideas?

Answer 1

Since one can't select a previous sibling, one can use flexbox to achieve that effect by have one order in markup and another visual rendered.
Here I used flex, switched order in markup and again, visually, using flexbox property order
Now both the CSS sibling selectors ~/+ will work as they target the next sibling in the markup.
.heading {
color: #fff;
background: #000;
padding: 5px;
margin: 5px;
}
.collapse {
padding: 5px;
display: none;
order: 2 /* added property */
}
.collapse.in {
display: block;
}
.flex { /* added rule */
display: flex;
flex-direction: column;
}
.collapse ~ .heading { /* "collapse" was misspelled */
opacity: 0.2;
}
.collapse.in ~ .heading { /* "collapse" was misspelled */
opacity: 1;
}
<div class="parent">
<div class="firstChild flex">
<div class="collapse in">
Content
</div>
<div class="heading">
STep 1
</div>
</div>
<div class="secondChild flex">
<div class="collapse">
Content
</div>
<div class="heading">
STep 2
</div>
</div>
<div class="thirdChild flex">
<div class="collapse">
Content
</div>
<div class="heading">
STep 3
</div>
</div>
<div class="fourthChild flex">
<div class="collapse">
Content
</div>
<div class="heading">
STep 4
</div>
</div>
</div>
For older browsers, display: table can be used
.heading {
color: #fff;
background: #000;
padding: 5px;
margin: 5px;
}
.collapse {
padding: 5px;
display: none;
}
.collapse.in {
display: table-footer-group; /* changed property */
}
.child { /* added rule */
display: table;
}
.collapse ~ .heading { /* "collapse" was misspelled */
opacity: 0.2;
}
.collapse.in ~ .heading { /* "collapse" was misspelled */
opacity: 1;
}
<div class="parent">
<div class="first child">
<div class="collapse in">
Content
</div>
<div class="heading">
STep 1
</div>
</div>
<div class="second child">
<div class="collapse">
Content
</div>
<div class="heading">
STep 2
</div>
</div>
<div class="third child">
<div class="collapse">
Content
</div>
<div class="heading">
STep 3
</div>
</div>
<div class="fourth child">
<div class="collapse">
Content
</div>
<div class="heading">
STep 4
</div>
</div>
</div>