CSS - parent element overrides child element properties

Question

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?

score 11 · Accepted Answer · answered Jul 06 '11 at 08:18

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; }

answered Jul 06 '11 at 08:18

Marek Musielak

26,832
8
72
80

score 5 · Answer 2 · edited May 23 '17 at 11:45

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

edited May 23 '17 at 11:45

Community

1
1

answered Jul 06 '11 at 08:14

TommyBs

9,354
4
34
65

You really shouldn't use `!important` where there is an option to increase your rule specificity instead. – shanethehat Jul 06 '11 at 08:17

score 4 · Answer 3 · answered Jul 06 '11 at 08:17

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;.

score 2 · Answer 4 · answered Jul 06 '11 at 08:14

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.

answered Jul 06 '11 at 08:14

Petter

4,053
27
33

score 2 · Answer 5 · edited May 23 '17 at 11:53

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?

score 0 · Answer 6 · answered Oct 01 '19 at 14:21

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.

CSS - parent element overrides child element properties

6 Answers6