CODEWITHSUNDEEP
javascriptjquerycss
abcid d
abcid d

Reputation: 2963

CSS Write additional class properties based on inline class condition

I have a little code below. When I click on the button, my class square will have an inline style <div class="square" style="display: block;"></div>

Based on this inside style, I will have some more properties for the class square such as: left: 0. In other words, when class square has a style="display: block;", I need to have more stylings for it. But I don't know how to write more CSS on this situation.

NOTE: I know I could write more class properties inside this javascript for what I need, but in this case, this javascript function is not on my hand. My job is to add more properties style when the square has style="display: block;"

Please give a hand. Thanks!

$(function() {
  $('button').click(function() {
    $('.square').css('display', 'block');
  })
})
.square {
  width: 100px;
  height: 40px;
  background-color: gray;
  position: absolute;
  left: -100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="square"></div>
</div>
<button>Click Me</button>

Upvotes: 0

Views: 168

Answers (1)

Johannes
Johannes

Reputation: 67799

You could add a class with selector .square[style="display: block;"] and the desired properties (I added a red border for demonstration purposes in my snippet below) to your stylesheet which will be applied automatically when the element gets that inline style="display: block;" attribute on clicking the button:

$(function() {
  $('button').click(function() {
    $('.square').css('display', 'block');
  })
})
.square {
  width: 100px;
  height: 40px;
  background-color: gray;
  position: absolute;
  left: 100px;
}
.square[style="display: block;"] {
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square"></div>
<button>Click Me</button>

Upvotes: 1

Related Questions