How to set CSS scope in wordpress?

Question

How to set CSS scope in wordpress?

Navigation

#1 by (2 votes)

1

Even using the body_class() function that returns the page name or the id of it when applying a certain rule to 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 css I always try to use the first class that is in body , ie:

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

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

css wordpress

asked by anonymous 03.07.2017 / 15:58

1 answer

What does this line mean? - $ .ajaxSetup ({scriptCharset: "utf-8", contentType: "application / x-www-form-urlencoded; charset = UTF-8" Update only one character in a column - Oracle

score 2 · Accepted Answer

The problem that is happening as @bfavaretto has already reported is that in its stylesheet contato.css on line 7 it looks like this:

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

The correct would look like this:

Without the comma after .hero-body

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

UPDATE

If you want to leave all of the text within hero-body with 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;
}

In this way you are defining the css to apply the white color throughout the text that is within hero-body and also in all text that has the title class.

Class title by default would receive the white color by inheritance of hero-body . But probably your theme has the class title assigning another color to it, so with this css .page-id-5 .hero .hero-body .title you have defined that every class title that is inside the hero-body class will receive the white color.

The comma is used to start another css class that will have the style that you will define in common.