2

This is how the div currently looks like 

<div class="toolbar" style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(232, 232, 232); height: 56px; padding: 0px 24px; display: flex; justify-content: space-between;"><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: &quot; &quot;; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL CLIENTS</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: &quot; &quot;; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 25 --><!-- react-empty: 26 --></div></div></div><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: &quot; &quot;; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL VERTICALS</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: &quot; &quot;; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 39 --><!-- react-empty: 40 --></div></div></div><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: &quot; &quot;; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL INSTANCES</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: &quot; &quot;; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 53 --><!-- react-empty: 54 --></div></div></div></div>

As you can see the style attribute puts a background-color property as 

style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(232, 232, 232);

However, I wanted a different color and I can not change this div directly, so I added a CSS class called toolbar that looks like 

.toolbar {
    background-color: #37517e;
    color: #ffffff;
}

Which can be seen from the div code above. However, the background-color from .toolbar is ignored and the one from style is applied. I confirmed this in DevTools

enter image description here

How can I apply the color of my choice?

daydreamer
  • 87,243
  • 191
  • 450
  • 722

3 Answers3

4

used !important in css property

.toolbar {
    background-color: #37517e!important;
    color: #ffffff;
}


.rowTest{
 background-color:pink!important;
}
<div style="background-color:green;width:100%;height:50px;" class="rowTest"><div>
Farhad Bagherlo
  • 6,725
  • 3
  • 25
  • 47
1

The only way to override inline style attribute using class is with the !important keyword:

.toolbar {
    background-color: #37517e !important;
    color: #ffffff;
}

Here is a working example:

div.cls {
  color: blue !important;
}
<div style="color: red;" class="cls">This text should be red, but it's not</div>
Dekel
  • 60,707
  • 10
  • 101
  • 129
0

Use the !important tag. This overrides other CSS rules that may apply. That said -- having a bunch of styling in the style tag in your HTML is discouraged. I'd add this information to your stylesheet and associate it with the div and class. This allows you to better visualize the cascading nature of the rules... the latest rule applies to an element.

Jonathan Howard
  • 21
  • 2