javascript - Dynamically create nested CSS -

javascript - Dynamically create nested CSS -

i want create kind of 'scope' in css, css in particular style tag effect specific html node.

simpler: want this:

<style id="style1"> .foo { color: red; } .bar { color: green; } </style> <style id="style2"> .dor { color: blue; } </style>

dynamically turn this:

<style id="style1"> #scope1 .foo { color: red; } #scope1 .bar { color: green; } </style> <style id="style2"> .dor { color: blue; } </style>

with php or javascript (preferably using jquery)

is there simple way of doing this?

i don't know of specifically, suggest looking sass/scss. provides similar way of nesting css (and much more)

eg.

#style1 { .foo { color: red; } .bar { color: green; } } #style2 { .dor { color: blue; } }

javascript php css scope