7

The problem is very simple:

    <div id="main-content">
<ul>
    <li>
   <div class="post-row">
         <div class="post-footer">

               This is the Footer       
                <div class="footer-buttons">
                    <ul>
                        <li>Edit</li>
                        <li>Reply</li>
                    </ul>
                </div>
         </div>
   </div>
    </li>
</ul>
</div>

And now main content:

#main-content ul {
    margin:0;
    padding:0;
}

#main-content ul li {
    display:block;
    list-style:none;
}

And last, footer-buttons:

.footer-buttons {
    float:right;
}
.footer-buttons ul {
    margin:0;
    padding:0;
}
.footer-buttons ul li {
    display: inline;
}

The problem is that the list in .footer-buttons is displayed as block. And in fact when I checked DOM the display: inline is overrided by the #main-content.

From what I know understrand this shouldn't happen. Or am I wrong and id elements will always override child classes?

6 Answers 6

11

You have 2 selectors: #main-content ul li and .footer-buttons ul li . First of them uses id and the second uses class, that's why the first one is used as more descriptive. Use:

#main-content .footer-buttons ul li { display: inline; }
5

I think IDs do take priority over classes however this post may have more info CSS class priorities

you could always add !important on the .footer-buttons ul and ul li declarations or add the id in front of th3e .footer-buttons class

e.g.

#main-content .footer-buttons ul
1
  • You really shouldn't use !important where there is an option to increase your rule specificity instead. Commented Jul 6, 2011 at 8:17
4

Yes, selectors with IDs will always override selectors with just classes. This is due to "specificity"; you can get a good overview here.

Solutions here would include adding #main-content to your footer selectors, or declaring the style as display: inline !important;.

2

Maybe I misunderstand your question, but if you want the actual list to be inline, this should work:

.footer-buttons ul {
    margin:0;
    padding:0;
    display: inline;
}

What your code does is make the list elements be displayed as inline.

2

This is correct behaviour because an id is considered more specific than a class, and so to use them in a similar scenario will always give the id rule priority.

The best way to fix this is by defining more specific rules. This doesn't have to mean targeting everything by class though, you can build your rules from the specific ids, like is TommyB's answer. !important should however be avoided: What are the implications of using "!important" in CSS?

0

Keep in mind that IDs have higher priority than classes, and inline style is higher than IDs. The best fix would be to refactor your css, removing display:block; from #main-content. Or even better: make main-content a class. Avoid using !important, it's not a good practice.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.