CODEWITHSUNDEEP
css
Łukasz Baran
Łukasz Baran

Reputation: 1239

CSS - parent element overrides child element properties

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?

Upvotes: 7

Views: 18738

Answers (6)

SuperMonteiro
SuperMonteiro

Reputation: 65

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.

Upvotes: 0

shanethehat
shanethehat

Reputation: 15560

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?

Upvotes: 2

Marek Musielak
Marek Musielak

Reputation: 27132

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

Upvotes: 11

Chowlett
Chowlett

Reputation: 46667

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

Upvotes: 4

TommyBs
TommyBs

Reputation: 9646

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

Upvotes: 5

Petter
Petter

Reputation: 4165

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.

Upvotes: 2

Related Questions