CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gags
Gags

Reputation: 3829

CSS sibling selector not working as expected

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?

Upvotes: 0

Views: 1717

Answers (1)

Asons
Asons

Reputation: 87191

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>

Upvotes: 2

Related Questions