0

I'm playing with Material-Design-Lite and I want to override a style but it won't work. Let say that I woudl like to change the padding on mdl-navigation__link which is actually 16px 40px to 0px.

I have overrided the property on my custom style sheet but without success. However some other styles are applied :

.my-navigation .mdl-navigation__link {
  padding: 0px;
  border: 1px solid red;
}

The border is applied but not the padding. And into teh web develope tools I see that my padding property is ignored (strikethrough) du to a styleguide.css that I never include !

I suppose that styleguide.css is included by the javascript file. So the only trick to apply my custom padding is to mark it as !important.

Is it a cleaner way to override styleguide.css properties ?

Edit : Here is the codepen : http://codepen.io/anon/pen/ZGjYqo

gervais.b
  • 2,294
  • 2
  • 22
  • 46
  • `styleguide.css` is not provided via JS or via the builds. It is only for the microsite. Can you please show us some reproduction code via a codepen or similar? – Garbee Jul 16 '15 at 12:16
  • Of course, the codepen is at the end of the original post – gervais.b Jul 16 '15 at 13:59
  • I'm not seeing any styleguide.css requests. However, the JS also is non-functioning so if it is the cause of the problem, who knows why. Make sure the codepen is fully functional, not just a copy & paste of your local source. – Garbee Jul 16 '15 at 14:03
  • Sorry, he is now fully functional. Details of my problem in the "content' of the codepen result – gervais.b Jul 16 '15 at 14:06

2 Answers2

3

You just need to increase the specificity of your selectors. Check the specificity of what MDL provides. .mdl-layout__drawer .mdl-navigation .mdl-navigation__link. This is a 3-class specificity, so about 30. You are doing a two class selector, so roughly 20 specificity. Whether yours comes after or not, the high specificity wins.

Some good resources on specificity:

Garbee
  • 10,581
  • 5
  • 38
  • 41
  • Instead of doubling it. I have specified it much more `.pgrn-navigation.mdl-navigation .mdl-navigation__link`. Thanks – gervais.b Jul 17 '15 at 09:33
0

Try doubling up the classes. Even if they are the same class the specificity will be greater than it was when selecting only one.

Perfect for allowing overrides without resorting to !important

for example:

.mdl-navigation__link.mdl-navigation__link {
  padding: 0px;
  border: 1px solid red;
}

More tricks like this for lower specificity at css-tricks

And my favorite guide on CSS Specificity

EHLOVader
  • 483
  • 4
  • 13