Padding Overwriting Later Padding

Question

quick question about my stylesheet. I was always taught that CSS overwrites up to down. So something on line 1 could be overwritten by something on line 10. I'm trying to increase the padding in a section, but not touch the other style:

This is on Line 642

&:first-of-type > div {
        padding-top: 10px;
        img {
            margin-bottom: 20px;
        }
}

This is on Line 722

.apiPT {
    padding-top: 32px;
}

I don't even want to mention that I don't believe my HTML should be picking up the style from 642, but it is and it's being overwritten by it. I really would love to avoid using !important as that's obviously not too good. But not really sure why I'm having this issue...

<div class="col-md-7 col-md-offset-5 apiPT">
                <ul class="pipe">
                    <li><a href="api-reference/v3">API references</a></li>
                </ul>
</div>

`:first-of-type > div` has higher specificity than `.apiPT` https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity depending on the rest of your markup, you could change `.apiPT` to `:first-of-type .apiPT` but there are a bunch of ways to fix it and how you should fix it depends on how the rest of your markup and css are structured — Michael Coker, May 30 '17 at 19:27
try giving an id to that particular element and then set its properties — komal, May 30 '17 at 19:27
Check out my answer on specificity to this question.... https://stackoverflow.com/questions/43542922/how-to-avoid-bootstrap-css-overriding-the-custom-css/43544654#43544654 — sn3ll, May 30 '17 at 19:28
Possible duplicate of [How to avoid bootstrap css overriding the custom css?](https://stackoverflow.com/questions/43542922/how-to-avoid-bootstrap-css-overriding-the-custom-css) — sn3ll, May 30 '17 at 19:29
@sn3ll The extra classes in front did it, so for my case: .row .card .apiPT gave it higher priority - thanks. — John Barr, May 30 '17 at 20:01

score 1 · Answer 1 · answered May 30 '17 at 19:31

1

You could assign an id tag to the link if it is the only link there

<a href="api-reference/v3" id="example" >API references</a>

That would overwrite it

answered May 30 '17 at 19:31

Thomas Ray

93
8

Have too many instances on multiple pages, so not going to use an ID - thanks though – John Barr May 30 '17 at 20:02

score 0 · Answer 2 · answered May 30 '17 at 20:03

0

The answer is just as @sn3ll said:

.class1 .class2 .apiPT {
  ...
}

gave it a higher priority - thanks for the help!

answered May 30 '17 at 20:03

John Barr

105
1
8

Padding Overwriting Later Padding

2 Answers2