0

I have a fairly complex CSS file that a co-worker has written for a single server monitoring page. The monitoring page looks great BUT it calls out element tags and other proprietary tags that conflict with my existing css- im trying to absorb the server monitoring page into a larger pre-existing page without breaking EVERYTHING AND without re-designing an entire CSS. There has to be a way to nest an entire css so that it only looks at a single div or attribute....right?

Ive tried something similar to this:

#server_mon ~ {
   {#cssrule1}
   {#cssrule2}
}

Where #server_mon is the div that the monitoring table lives in...this doesn't work. I understand the basics of nesting but nesting an entire css...hmmm any thought or approaches to this? THANK YOU- this will save me a ton of work.

j08691
  • 204,283
  • 31
  • 260
  • 272
Charles
  • 305
  • 1
  • 3
  • 15
  • If switching to SCSS is an option, it would save you a ton of work as you get this by default. :) – aarjithn Oct 28 '15 at 19:27
  • You can't achieve this with CSS alone. You could probably do a find & replace on your file to append the element ID to every statement. – isherwood Oct 28 '15 at 19:30
  • You'll likely have to _"scope"_ the previous classes with a CSS class that you define for the target element. `.a {} .b {} .c {}` to `.scope .a {} .scope .b {} .scope .c {}`. If you can use a CSS pre-processor would be handy so you don't have to this manually for every class created that you want to scope. – hungerstar Oct 28 '15 at 19:31
  • I think prefixing each rule is the only way: `#server_mon .cssrule1 {background-color: red}` Others mention using a preprocessor like SASS, but of course that would mean rewriting CSS. – Jack Oct 28 '15 at 19:31

0 Answers0