0

I am using Wordpress and have the following code to style my menu items

css (the attributes I'm looking to change)

.main-nav li a {
  color: #222;
}

.main-nav li a:after {
  background-color: #d11e5d;
}

I have applied a custom class .btn-contact on one of the buttons so I can override its color and other attributes but I can't seem to target it. (using .btn-contact { color: red; } or .btn-contact { color: red !important; } doesn't work )

the output

enter image description here

user3550879
  • 3,389
  • 6
  • 33
  • 62

2 Answers2

1

Just add 

.btn-contact { 
   color: red !important; 
 }

The !important should override every other value for the same property.

nashcheez
  • 5,067
  • 1
  • 27
  • 53
  • I was under the impression that using important was very bad coding practice – user3550879 Jan 03 '17 at 20:31
  • Also it doesn't work since I think it doesn't target it specifically enough which is what I am having problems with – user3550879 Jan 03 '17 at 20:36
  • Yes, usage of `!important` is a bad practice, but not always. When you have to override 3rd party code & inline styles, you can or rather should use it. Refer to: http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – nashcheez Jan 04 '17 at 07:52
0

I don't know what the :after element is there for, but you need add the content property inside the rule, otherwise it will not render. You can also use en empty string like content: "".

Giacomo Cosimato
  • 635
  • 5
  • 9