CODEWITHSUNDEEP
htmlcss
Brian Kulp
Brian Kulp

Reputation: 11

CSS Opacity When Other Classes Present

I am working with another developer's code and want to know if there is a way to apply a different opacity to "scrollbar" using CSS code when "overlay" is present but not when "overlay-inactive" is present under "table" as shown below. Is this possible?

/*Want scrollbar to have opacity:1 in this table*/
<div class ="table">
  <div class = "overlay"></div>
  <div class = "scrollbar"></div>
</div>

/*Want scrollbar to have opacity:0 in this table*/
<div class ="table">
  <div class = "overlay-inactive"></div>
  <div class = "scrollbar"></div>
</div>

/*Class structure is the developer's and cannot be changed to have scrollbar as a subclass of overlay*/

Upvotes: 1

Views: 59

Answers (2)

Jacob
Jacob

Reputation: 2155

Use the adjacent sibling operator + to determine if the class exists on an adjacent element:

.overlay + .scrollbar {
    opacity: 1;
}

.overlay-inactive + .scrollbar {
    opacity: 0;
}

Upvotes: 0

m4n0
m4n0

Reputation: 32255

Use the + operator to reference the next element to current element.

.overlay + .scrollbar {
  opacity: 1;
}
.overlay-inactive + .scrollbar {
  opacity: 0;
}
<div class="table">
  <div class="overlay">1 - You can see me</div>
  <div class="scrollbar">2 - You can see me</div>
</div>


<div class="table">
  <div class="overlay-inactive">1 - You can see me but not below</div>
  <div class="scrollbar">2 - Hidden content</div>
</div>

Upvotes: 1

Related Questions