PreCSS nesting not working

Question

I have the following CSS declaration using the PostCSS precss plugin:

.woocommerce-account.logged-in {

    .myaccount-hamburger{
        display: block;
    }

    .woocommerce{
        position: static;
    }

    #main{
        position: relative;
    }

    .site-header{
        margin-bottom: 0;
    }

}

But for whatever reason, the .woocommerce rule isn't being applied. Any clues why? I know it's a valid selector, because if I start fiddling around and removing some of the other declarations, it does in fact work.

Please note, that if I manually expand every rule like this, everything is working fine. Therefore, it's an issue with the nesting:

.woocommerce-account.logged-in .myaccount-hamburger{
    display: block;
}

.woocommerce-account.logged-in .woocommerce{
    position: static;
} 

.woocommerce-account.logged-in #main{
    position: relative;
}

.woocommerce-account.logged-in .site-header{
    margin-bottom: 0;
}

As per request, here's some HTML. There's a lot of html so I'll show the basics...

<body class="woocommerce-account logged-in">
    <header class="site-header"></header>
    <main id="main">
        <div class="myaccount-hamburger"></div>
        <div class="woocommerce"></div>
    </main>
</body>

Please post your html as well, as @MattheusBica 's answer might be correct, but there is no way to know for sure. (Nor is there any way to actually find the problem without the HTML). If possible, also post your _output_. — somethinghere, Jun 21 '16 at 16:24
The output is that every style rule is being applied except for the fact that .woocommerce has not changed to static. — Jordan Carter, Jun 21 '16 at 16:32
@Red2678 oh those aren't actually there. I added them in this question by mistake. — Jordan Carter, Jun 21 '16 at 16:55
What does the PostCSS output look like for this set of rules? — gfullam, Jun 22 '16 at 12:12

score 1 · Answer 1 · edited Jun 21 '16 at 17:48

1

You are probably going to provide a bit more context on this to get an answer, but it's possible you are mistaking position: static; for position: fixed;.

Static is the default value for position so unless you have set it otherwise (i.e. in some code other than the above) it will remain unchanged.

edited Jun 21 '16 at 17:48

markwalker_

12,078
7
62
99

answered Jun 21 '16 at 16:36

dave

11
2

This is the answer! – Red2678 Jun 21 '16 at 23:14
1

This is not the answer. Position static was intentional. The issue has to do with nesting. If I expand the CSS like I did in my question, it works exactly like I want it to, but for some reason when I nest it, the static rule doesn't get applied. Forget the actual rules themselves at this point. The fact is, some styling isn't even being applied at all when I nest, but it does when I expand it. – Jordan Carter Jun 23 '16 at 13:50

Matheus Bica · Answer 2 · 2016-06-21T17:00:16.863

-1

You need to put an space between ".woocommerce-account" and ".logged-in"

Like this:

.woocommerce-account .logged-in {

}

If your div's are like this:

<div class = "woocomerce-account">
    <div class = "logged-in">
    </div>
</div>

Hope that helps =)

EDIT: Updating for your question

I think I found your problem,

<body class=".woocommerce-account .logged-in">

It must have no points before the words like this:

<body class="woocommerce-account logged-in">

Hope that Helps now!

If it doesn't help the problem is probably on another place outside this piece of code.

edited Jun 21 '16 at 17:00

answered Jun 21 '16 at 16:22

Matheus Bica

1,055
3
13
23

No, I'm saying it's .woocommerce-account that also has .logged-in as a class.
– Jordan Carter Jun 21 '16 at 16:24
Then, you are doing it right, there is no problem in this tag, the problem is in another tag maybe, post your entire div structure(just the important ones), Check my new edit. – Matheus Bica Jun 21 '16 at 16:37
I updated my answer with html. Also note the section about the expanded CSS working. It's only the nested version that is failing, for some reason. – Jordan Carter Jun 21 '16 at 16:41
sorry, that was just a mistake of mine when writing the question. It doesn't actually have the dots in the html. – Jordan Carter Jun 21 '16 at 17:20

PreCSS nesting not working

2 Answers2