# Exclude CSS rule in Pinegrow

**URL:** <https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345>\
**Category:** General\
**Created:** [December 8, 2022, 12:35pm UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345 "2022-12-08T12:35:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adryan](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Adryan](https://forum.pinegrow.com/u/Adryan)\
**Post date:** [December 8, 2022, 12:35pm UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345/1 "2022-12-08T12:35:28Z")

</div>

Hey, is there a way to exclude certain CSS rule from working in the builder? So it works on the website but NOT in Pinegrow.

Something like:

```auto
body:not(.pinegrow-editor-wrapper-or-something) div {
    background: red;
}

```

So the div is red on the actual website and NOT red in Pinegrow?

---

<div class="post-metadata">

**Author:** ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)\
**Post date:** [December 8, 2022, 1:11pm UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345/2 "2022-12-08T13:11:23Z")

</div>

Surely you’ve already got what you want with the data-empty-placeholder attribute.

```auto
 <body>
        <section>
            <div data-empty-placeholder></div>
        </section>         
        <section class="bg-blue-400 dark:bg-yellow-400" data-empty-placeholder> 
            <div class="h-20 p-6"> 
                <h1 class="text-6xl">Heading</h1> 
            </div>             
        </section>         
    </body>     

```

In Pinegrow this looks like this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/8942c9bd3b9b0d7c6251be4e3f6271565123d09c.png)

but in the browser it looks like this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/ae914a212ec4a24bd66cbfe02a39616b31cfa894.png)

---

<div class="post-metadata">

**Author:** ![Adryan](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Adryan](https://forum.pinegrow.com/u/Adryan)\
**Post date:** [December 8, 2022, 1:47pm UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345/3 "2022-12-08T13:47:19Z")

</div>

I should have been more specific, sorry… My CSS rule is just an example. I want to apply some CSS only on the actual website and not apply it in Pinegrow builder.

---

<div class="post-metadata">

**Author:** ![Dom](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/dom/32/4887_2.png) [@Dom](https://forum.pinegrow.com/u/Dom)\
**Post date:** [December 8, 2022, 3:07pm UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345/4 "2022-12-08T15:07:27Z")

</div>

No need to apologise, I ought to have realised that you probably had a more specific use case in mind.

Don’t know the answer off the top of my head but have you checked the api documentation, there might be a clue there.

---

<div class="post-metadata">

**Author:** ![Adryan](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Adryan](https://forum.pinegrow.com/u/Adryan)\
**Post date:** [July 10, 2023, 5:58am UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345/5 "2023-07-10T05:58:55Z")

</div>

@matjaz @Emmanuel Is something like this possible?

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [July 10, 2023, 7:19am UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345/6 "2023-07-10T07:19:59Z")

</div>

> [@Adryan](#):
>
> ```auto
> body:not(.pinegrow-editor-wrapper-or-something) div {
> background: red;
> }
> 
> ```

@Adryan yes. All DOM elements in PG page view have data-pg-id attribute. This can be used to target elements:

```auto
html[data-pg-id] h1 {
   /* only visible in PG */
}

html.not([data-pg-id]) h1 {
   /* only visible outside of PG */
}

```

---

<div class="post-metadata">

**Author:** ![Adryan](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@Adryan](https://forum.pinegrow.com/u/Adryan)\
**Post date:** [July 10, 2023, 7:50am UTC](https://forum.pinegrow.com/t/exclude-css-rule-in-pinegrow/7345/7 "2023-07-10T07:50:55Z")

</div>

AWESOME. Thank you 🙂