Question

In the line of code below, how can i remove the border-top? I’ve tried “border-top: none;” but this didn’t work. Any help would be greatly appreciated!

dd {
border-top: 0;
font-size: 12px;
&:last-of-type {
border-top: 1px solid white;
position: relative;
top: -1px;
}

http://jsfiddle.net/q2Gm9

Answer 1

border-top: 0 !important;

You need to add !important, which tells the styling to take priority over previous styling.

Might be worth reading up on how css targets elements and what takes priority: this post explains it better than I can:
What are the priorities among CSS selectors

As a note: I seem to remember running into some problems in certain browsers if border styling is set differently, e.g if you add a style to all borders and then try to overwrite with individual border settings, e.g border-top – I’m sorry I can’t remember the exact details but something to keep in mind if you have other border problems.

---

UPDATE:
I have simplified the css to remove the nested css and unecessary duplicate selections, check here http://jsfiddle.net/VWQct/24/ . Is this what you were trying to achieve?

---