What Is Element.Style and Why Is It Overriding My CSS Settings

Override element.style using CSS

Although it's often frowned upon, you can technically use:

display: inline !important;

It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <li> elements in the first place.

How do you determine what is overriding your style?

In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.

Consider the following HTML:

<style>
  #foo { color: red; }
  p    { color: blue; }
</style>

<p id="foo">What color am I?</p>

You would see the following:

Why does element style override class that is set on element?

Both rules have the same specificity, so whichever rule comes last in the style declarations will win... Are you sure that the .parent a-rule is specified after the .content a-rule?

Another way to solve it would be to increase the specificity slightly, i.e:


.parent .child_item {
font-size: 16px;
}


Edit: You can play around with your test case here: http://jsfiddle.net/gburw/
To prove my point, try switching the CSS-declarations and you will see that whichever rule is defined last will "win".

Edit 2: You can read more about CSS specificity here. It's a pretty simple concept to grasp, the hard part is avoiding specificity wars with fellow developers =) So you should come up with a standard way you write CSS in your company. Following the guidelines of Pagespeed and YSlow is also always a good idea.

---

Related Topics