How to define CSS scope in wordpress?

Question

How to define CSS scope in wordpress?

Asked 7 years, 4 months ago

Viewed 49 times

1

Even using the function body_class() which returns the page name or the id by applying a certain rule in css some elements in other pages change, for example:

Home:

<body <?= body_class(); ?>> <!-- retorna uma string "home" -->
    <div class="hero">
        <h1 class="title">Titulo</h1>
    </div>
...

Contact page:

<body <?= body_class(); ?>> <!-- retorna uma string "page-id-5" -->
    <div class="hero">
        <h1 class="title">Titulo</h1>
    </div>
...

When using the css I always try to use the first class that is in body, that is to say:

.page-id-5 .hero .hero-body .title {
    color: white;
}

But even so this rule is being applied on the page home, what is the best way to separate the css's between pages on wordpress?

With this data you posted will not be able to reproduce the problem. It must be something specific to your code. Try playing in a simple example and update the question.

– bfavaretto

2017/07/03 at 14:21
Why do you think it doesn’t stop to reproduce? This is exactly the problem I’m facing, the title which is inside the "tree" of .page-id-5 is applying in places where they are not in the css hierarchy (starting with .page-id-5)

– RFL

2017/07/03 at 14:48
Because if you don’t have a class page-id-5 above .hero .title there is no way for the CSS to apply the selector .page-id-5 .hero .title.

– bfavaretto

2017/07/03 at 15:04
@bfavaretto put up a print for you to see.

– RFL

2017/07/03 at 15:27
Look at the image selector you posted, it’s different from what you described in the question.

– bfavaretto

2017/07/03 at 15:36
I’ve already added the hero-body in the question.

– RFL

2017/07/03 at 15:38
That’s not the difference, in the image has a comma that does not have in the question. It makes all the difference, isolates the .title.

– bfavaretto

2017/07/03 at 15:39
understood, I thought when using the comma inside the selectors that would select the hero-body and the title in the same order of parent selectors.

– RFL

2017/07/03 at 16:08

Show 3 more comments

1 answer

Browser other questions tagged css wordpress

You are not signed in. Login or sign up in order to post.

by Wendell • **1,312** points · Answer 1 · 2017-07-03T15:49:25+00:00

The problem that is happening as @bfavaretto has already reported is that in your style sheet contato.css on line 7 is like this:

.page-id-5 .hero .hero-body, .title {
    color: white;
}

The right thing would be:

Without the comma after .hero-body

.page-id-5 .hero .hero-body .title {
    color: white;
}

UPDATE

If you want to leave all the text inside the Hero-body with the white color including the titles the css correct should be as follows:

.page-id-5 .hero .hero-body, .page-id-5 .hero .hero-body .title {
    color: white;
}

This way you are setting the css to apply the white color to any text inside hero-body and also in all text that has the class title.

The class title by default would receive the color white by inheritance of hero-body. But probably your theme has class title assigning another color to her, then with this css .page-id-5 .hero .hero-body .title you defined that every class title within the class hero-body will receive white color.

Comma is used to start another class css which will have the style you will define in common.