Can't overwrite parent P tag

HTML & CSS
1

Hi all,

I have a custom layout for my wordpress content article pages and I have this code (as wordpress sucks with line breaks).

Content p {font-size 1.5em; padding-bottom:1.5em}

This is fine for most of the paragraphs, but for certain ones I do not want any bottom padding so I did this.

Content p.nobreak {padding-bottom:0em}

In my html article I had <p class=“nobreak”>
This didn’t work and it seemed it was still using the 1.5 padding.
I tried a lot more variations of the code in firebug above but I couldn’t get it to work.

Would love some help with this!
I was considering just changing the Content p to 0 padding, but I would have to go through 10 pages of articles and change the html for every single P tag.

2

Hello :). The reason that it isn’t working is that there is probably another rule that is of higher specificity :).

We’d need the full site to confirm this however. You can test it by giving the p.nobreak{} rule a !important declaration at the end. Like this

#content p.nobreak{padding-bottom:0em!important;}

However that doesn’t really solve the issue (well, it does), and to give the a proper fix we’d need the full HTML/CSS or the site to look at (the link to the site is preferable :)).

3

Easy :slight_smile: thank you very much

4

You’re welcome :). Glad I could help.