How to constrain the scope of inline CSS?

Question

I'm rendering dynamic CSS for each item in a list. Each item will have potentially unique CSS rules for its elements, i.e.

<div id="thing1" class="vegas">
  <style> 
  p {
    font-size: 14pt; // this stuff is generated dynamically and i have no control over it
    color: green;
  }
  </style>
  <p>
    I'm thing 1!
  </p>
</div>

<div id="thing2" class="vegas" >
  <style>
  p {
    font-size: 9pt; // so is this stuff
    color: red;
  }
  </style>
  <p>
    I'm thing 2!
  </p>
</div>

Is there a way to wrap each item in a general CSS rule that would limit the scope of each item's associated CSS to the item itself? Like

.vegas > * {
  whatever-happens-in-here: stays in here;
}

Or any other way to handle scoping who-knows-what kinds of dynamically particular CSS?

I think you're looking for `!important` http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean — thanksd, Dec 14 '15 at 19:53
I am unable to edit or modify the dynamic CSS coming in, so I don't think I can use `!important`, or ? — irbanana, Dec 14 '15 at 19:58
Are you saying you want to ignore inheritance of any css properties set anywhere outside of this 'vegas' class? — thanksd, Dec 14 '15 at 20:03

score 0 · Answer 1 · answered Dec 14 '15 at 19:52

0

The cascading style sheets are able to handle styling children of particular elements, so:

div#thing1 p {
    rule: value; // Only applies to p in div with id="thing1"
}

div#thing2 p {
    rule: value; // Only applies to p in div with id="thing2"
}

answered Dec 14 '15 at 19:52

TbWill4321

8,626
3
27
25

score 0 · Answer 2 · answered Dec 14 '15 at 19:52

You need to know about the global styles that browsers have. For eg., find the below list:

font-family
line-height
text-align

The above have their default value as inherit, which means they get the property values from their parent, no matter what. So if you change the parent's property, your child also gets changed.

And you have other properties like:

margin
padding
border
width
height

These do not change, or inherit from the parent. So, if you wanna do something like what you wanted, you need to give your descendants, or immediate children, not to inherit or reset the styles for the children.

score 0 · Answer 3 · answered Dec 14 '15 at 19:59

Why don't you use inline style attribute?

<p style="color:red;align:center"> Hello </p>

The above CSS style will only be applied to that particular paragraph tag. You could use inline style statement for other tags and HTML elements too.

Or you could include an external common stylesheet and use the inline statements where you need a variation.CSS applies the latest style description it comes across.So the inline statements would over-ride the common css stylesheet effects.

How to constrain the scope of inline CSS?

3 Answers3