Magento 2: How to override footer CSS class in Blank theme?

Question

I've already extended some styles from Blank theme, however I haven't been able to override styles from class:

.footer.content ul > li

In my theme, I created a custom block in the footer. I can see in firebug that my CSS rules are loaded, however they are not applied since the default magento class .footer.content ul > li takes priority over my styles.

If I disable the styles in firebug from .footer.content ul > li then my styles are applied.

• user3262111: You need to make sure that your style is loading before the default style. Easy way to test this is to use !important and see if the default style is being overridden by your styles.
• Luis Garcia: How to make my style loads before the default style? Is there another solution than using !important?
• user3262111: This was just a test. If your style override was successful. Then look in your head styles file and make sure that your style sheet is below the default stylesheet.

Answer 1

You might take into consideration the priority of CSS selectors. This is described in official docs: http://www.w3.org/TR/CSS21/cascade.html#specificity

For example you can try:

body .footer.content ul > li

This should give your custom style higher priority than style from theme package.

• Luis Garcia: Since .footer.content ul > li is a default magento style, I can't edit it or remove it (or I don't know how to do it). So I would like to override that style but I haven't found a way to do it.
• Amasty: You should write that style in your custom CSS file. Just use full "body .footer.content ul > li" descriptor to describe your class path.