Applying css to all paragraphs elements that overrides higher specifiers also

Question

How can i apply CSS to all the paragraph elements of html document at once so that it also overrides higher specifiers also i know * selector but it select all element

 .about-box p{
        font-family: Montserrat-Regular;
        font-size: 14px;
        line-height: 16px;


    }

now if i apply following css it will not work on higher specifier like one given above

 p{

        font-size: 20px;

    }

i have tried using *P body>p .

Answer 1

It takes a thief to catch a thief.

There might not be the right way to correct the wrong. But following could help you to solve or achieve what you want.

What you need is help of class and id selectors, to act as the higher specifiers so that they would override other higher specifiers.

Solution:

html [class] > p, 
html * > * > p,
html [class] > * > p,
html [id] > * > p,
html [class] > * > * > p,
html [id] > * > * > p {
    font-size: 20px;
}

.about-box p {
    font-family: Montserrat-Regular;
    font-size: 14px;
    line-height: 16px;
}

<div class="row">
    <div class="about-box">
        <h2>About Us</h2>
        <p>some paragraph goes here ....</p>
    </div>
    <div class="col-sm-12">
        <div class="thumbnail">
            <div class="caption">
                <h2 class="text-center">Your Books & Book Proposals:</h2>
                <p>paragraph goes here </p>
                <p>paragraph here</p>
            </div>
        </div>
    </div>

@huelfe Thanks for the jsFiddle code, used your HTML.

Also sharing Codepen to tweak the code and play around.