Question

How is the priority determined when conflicting attributes are specified directly or through css?

In this example, the display : none specified through css seems to be overriding the display : inline-block that is directly specified for id=1, so that element becomes visible.

<style>
.invisible{
    display : none
}​​
</style>
<div id=1 class="invisible" style="display:inline-block">Hello World</div>

In the following example, where I have two conflicting class specifications,

<style>
.invisible{
    display : none
}​​
.visible{
    display : inline-block
}​​
</style>
<div id=1 class="visible invisible">Hello World</div>

the display : inline-block specified through .visible class seems to be overriding display : none specified through .invisible class.

What are the rules that determine the priority in these cases?

Answer 1

To answer your question, in example one, your code is wrong…It’s not display=”inline-block”..it’s

<div id=1 class="invisible" style="display: inline-block;">Hello World</div>

inline styles always take precedence over style sheets. but because it was written incorrectly, the style sheet took over.

In example two, the display block wins because it is declared after display:none. Browsers read code from top to bottom, so the last value you declare for a property wins (well unless you use !important tags). And again, inline styles always win. There are more priority rules, but that’s all you need for your example.