Question

I need to include a css-file in my webpage, but the problem is that it should only match inside a certain div. Example:

Normal CSS-file:

#main td {
padding:20px;
}

Additional CSS-file:

.myclass td {
padding:0px;
}

Html:

<div id="main">
    <table><tr><td>TD with padding 20px</td></tr></table>
    <div id="inside" class="myclass">
         <table><tr><td>TD which should have with padding 0px, but get padding 20px; </td></tr></table>
</div>

This is only a simplified example – in the reality, the additional css-file is very long and complex (I need to include a tinymce, but the css-definitions here are only made by class and therefore overidden by the “normal” css-file).

My Q is: Is there a tool (perhaps in PHP?) which is able to change the additional css-file to work only on a special id? In the example, it should change all entries in the additional css-file to:

#inside .myclass td {
    padding:0px;
    }

and of course output a css-file with valid syntax.

Answer 1

You can use SASS. It is written in ruby instead of php but it can easily do what you want using nested rules:

#inside {
  .myclass td {
    padding: 0;
  }
}

Will compile to:

#inside .myclass td {
  padding: 0;
}

To prefix every selector in a given file you can use a nested import like in the following example:

/* File vendor.scss */
.myclass td {
  padding: 0;
}

Your importing file:

/* File main.scss */
#inside {
  @import "vendor";
}

This will give the same result as the example above.

Note that when using the nested import your imported file has to be a .scss file.