3

My google chrome extension needs to wrap content of certain elements on page user is browsing into custom element, say, <xelem>original content</xelem>. This change should not make any visible effect.

Is it possible to make <xelem> NOT affected by * css rules (or any other rules that might apply to it), but at the same time retain inherited styles?

artemave
  • 6,786
  • 7
  • 47
  • 71
  • 1
    Closely related: [Layout-neutral tag for CSS?](http://stackoverflow.com/questions/1751765/layout-neutral-tag-for-css) – Pekka Apr 14 '11 at 17:38
  • This sentence `Is it possible to make NOT affected by any rules that might apply to it, but at the same time retain inherited parent styles` sounds like a contradiction to me. Could you please maybe provide some example? – serg Apr 14 '11 at 17:41
  • @serg: `Inspect element` in Chrome (any element). In Styles tab you'll see `Matched CSS Rules` and a bunch of `Inhereted from ...` underneath. I want the former to never apply whilst preserving the latters. – artemave Apr 14 '11 at 18:09

1 Answers1

1

Considering you are working with css3, have a look at the :not pseudo-class.

Something like

:not(xelem) {
    /* ... */
}

should work...

proximus
  • 689
  • 7
  • 20
  • I don't see how it is applicable in this case. Can you elaborate? – artemave Apr 14 '11 at 19:07
  • Well it's the only way I know excluding tags from defined applicable css rules. Applying `:not()` to existing `*` css which might apply to `` should exclude `` encapsulated elements from your definitions. I never heard of any global non-css-affected tag... This would contradict known css selector schemes and the principle of cascades. Did I misunderstand your question? – proximus Apr 14 '11 at 19:24
  • The trick is HOW to change `*` to `:not(xelem)` on a page I don't control. – artemave Apr 15 '11 at 13:47