Restricting a css to an element and its descendants at runtime

Question

Today I am facing a problem of restricting the scope of css. The

<div class="parent">
<div id="childWithNoCss">
<p>No css</p>
</div>
<div id="childWithCss">
<p>Apply css</p>
</div>
</div>

My css is:

div{

color:red}

p{color:blue}

I need to apply the css specific to the id childWithCss. The css is fixed (I cannot change it) just need to limit its scope only to a specific element. I cannot use scope attribute since it is incompatible in some browsers. Is there any other solution?

Regards

What do you mean? That only the div with `id` childWithCss will applied that styles? — Francisco Romero, Jun 02 '16 at 09:36

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

Are you trying to find a workaround for this?

<style scoped>
  p { 
    //some style
  }
<style>

If so, there are some jQuery plugins that do the same thing and work for IE, at least for IE 9 and above. Here's one example:

jQuery scoped CSS plugin

If that's not what you're trying to do, can you not just add some nested css? Does this help at all with what you are trying to do?

Load an external CSS for a specific DIV

edited May 23 '17 at 12:22

Community

1
1

answered May 31 '16 at 20:33

jtmingus

804
5
10

Your solution was what i was looking for – Manish Basdeo Jun 05 '16 at 17:56

score 0 · Answer 2 · answered May 29 '16 at 18:47

0

You can reset the CSS of an element with the css code: all:initial.

You could use some javascript to do this at runtime for the elements you want to reset. I see you tagged your question with angularJS, so jquery should be available.

jquery solution to reset all css for the p in the divs WITHOUT #childWithCss within .parent:

$('.parent div:not(#childWithCss) p').css('all','initial')

http://jsfiddle.net/2yXsL/3/

answered May 29 '16 at 18:47

JasperZelf

2,731
1
22
34

I cannot reset the css of an element the element may already contain a css of its own. – Manish Basdeo May 31 '16 at 18:38

score 0 · Answer 3 · answered Jun 04 '16 at 10:33

0

You should be able to do it with a bit of jquery

if ($('.parent').has('#childWithCss')) { 
    $('#childWithCss').find('p').css('color', 'red')
}

answered Jun 04 '16 at 10:33

Suresh Vyas

1
2

Works in this case bt what I was looking for was somefin more dynamic. I do not need a workaround to set the css but to just restrict its scope. – Manish Basdeo Jun 05 '16 at 17:58

score 0 · Answer 4 · answered Jun 04 '16 at 22:31

0

Reset the color of everything except #childWithCSS to the default text color with a bit of jQuery.

$("p:not(#childWithCSS p)").css("color", "initial");

answered Jun 04 '16 at 22:31

clickbait

2,818
1
25
61

Restricting a css to an element and its descendants at runtime

4 Answers4