Do not style pseudo-class :before/:after

Question

is there any way to style only the base element and not his :before or :after pseudoclasses?

<div id="main">bar</div>

#main:before {
  content:'foo'
}
#main {
  background:red;
}

I only want to have "bar" underpainted with red, not the "foo" part. Sure I can negate it in another css selector #main:before{background:white}, but I would like to have it done in one statement. I tried something like:

#main:not(:before) {
  background:red;
}

Edit: I need to use it not only for background color, but for font-size etc. as well

Answer 1

There is no need for something like :not(:before). The #main selector does that already. To see this, set a non-inheritable property like border:

#main { border: 1px solid; }

This will draw a border around main. It will not draw another border around the generated content. So the selector targets #main only. Your generated content has a transparent background (default).

The problem is rather that the generated content lives inside an anonymous box inside #main:

+-------------+
| +-----+     |
| | foo | bar |
| +-----+     |
+-------------+

Basically, this is the same situation as

<div id="main">
    <span class="before">foo</span>
    bar
</div>

You can easily see that it's not possible to add a background to the word bar only, because #main's background will shine through the span. If you use #main:not(.before) as a selector, this will change absolutely nothing.

All you can do is overwrite this by adding a white background to .before. Or insert a span around bar, as suggested in another answer.

Other properties like font are subject to inheritance, so technically the cause of the problem is different, but the solution is the same.

Answer 2

No, there is no way to refer to the content of an element without its :before or :after pseudo-elements, except by wrapping that content in an inner element. There just isn’t any selector for the purpose. But note that anything set on the element applies as such to the element as a whole only; only via inheritance (for inheritable properties) will it affect the rendering of the pseudo-elements. The background properties are special case in the sense that they are not inherited but they work almost as if they were, since the initial value is background: transparent.