I am working on a project where I need to apply unique CSS to each item in a list dynamically. Each item will have its own set of CSS rules specifically tailored to its elements.
<div id="thing1" class="vegas">
<style>
p {
font-size: 14pt; // this is all generated dynamically and out of my control
color: green;
}
</style>
<p>
I am thing 1!
</p>
</div>
<div id="thing2" class="vegas" >
<style>
p {
font-size: 9pt; // same situation here
color: red;
}
</style>
<p>
I am thing 2!
</p>
</div>
Is there a way to encapsulate each item within a general CSS rule to contain the scope of each item's respective CSS within that item itself?
.vegas > * {
whatever-happens-in-here: stays in here;
}
Are there any other methods to manage the unique dynamically generated CSS for each item in an effective manner?