CODEWITHSUNDEEP
csscss-selectors
OJNSim
OJNSim

Reputation: 798

Why inline style definition is not applied

Im developing google sheet side bar. For that link to google side bar css package is used.

bt1 has an inline style background-color declarations with important!.

however when page loads the color is something gray. I went over the google css trying to understand, with not much success.

bt2.onClick() - change bt1.disable. You can see the inline statement have effect only when bt1is disabled. If not linking to google css - behavior as expected.

My understanding is that inline style must always win. especially when specifying important!

my questions are:

  1. Is this statement true in 100% cases?
  2. If not - in what cases?
  3. Is there a way to overcome that?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">


</head>
<body>
    <button id="bt1" style="background-color: rgb(43, 226, 137) !important;">bt1</button>
    <button id="bt2" onclick="bt2OnClick()">bt2</button>

<script>
  function bt2OnClick(){
    let bt = document.getElementById("bt1");

    // Switch state
    bt.disabled = !bt.disabled;
  }
</script>
</body>
</html>

Upvotes: 0

Views: 93

Answers (1)

Charles Lavalard
Charles Lavalard

Reputation: 2321

Your style is in fact being applied but the add-ons1.cssyour adding add a background property with a linear-gradientso your background-color does not change the background-image property that represent the gradient

So if you want to override it, just select the background property instead of background-color

And you dont need you !important anymore :)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">


</head>
<body>
    <button id="bt1" style="background: rgb(43, 226, 137)">bt1</button>
    <button id="bt2" onclick="bt2OnClick()">bt2</button>

<script>
  function bt2OnClick(){
    let bt = document.getElementById("bt1");

    // Switch state
    bt.disabled = !bt.disabled;
  }
</script>
</body>
</html>

Upvotes: 1

Related Questions