current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote -3 down vote favorite

We are having rich text editor in which we can insert html. if any input contains <style> tag then the css is applied to entire window.

is it possible to restrict that CSS to be applied within <div> not entire window?

share|improve this question

closed as off-topic by MichaelT, GlenH7, Dynamic, Bart van Ingen Schenau, Kilian Foth Apr 10 at 15:19

  • This question does not appear to be about software development within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.
    
I guess (without HTML 5) you would need to parse the input and add a preceding CSS class or something similar. –  strudelkopf Apr 9 at 7:42
    
stackoverflow.com/questions/22955592/… –  gnat Apr 9 at 7:46
    
NOt able to delte post and my account... can anyone help me???? –  user116017 Apr 11 at 14:58
    
There's another community "StackOverflow" for questions about code more directly. You probably will get more attention there. This one is more for the process of design behind code and this is because your question is considered off-topic. And it's not for novice users, indeed there are users of all levels asking questions about how to get their design done properly and another advanced things, and believe me this is something not as easy as it seems. –  user1620696 Apr 11 at 15:42
1  
If you want to delete your account use the form here - programmers.stackexchange.com/contact to request it –  ChrisF♦ Apr 11 at 15:55
show 3 more comments

1 Answer 1

up vote 2 down vote

Yes, it is possible. HTML 5 supports the scoped attribute on style tags, which restricts styles defined within to being applied only to the descendants of its parent. An example below (shamelessly pulled and edited from the MDN article).

You could check your user input for style tags and add the scoped attribute, if not already present, either before the content is stored, or before you render it to the page.

<article>
    <div>
        The scoped attribute allows for you to include style elements mid-document.
        Inside rules only apply to the parent element.
    </div>
    <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
    <section>
        <style scoped>
            p { color: red; }
        </style>
        <p>This should be red.</p>
        <div>
            <p>This should also be red</p>
        </div>
    </section>
</article>
share|improve this answer
    
thanks a lot @AndyBrush. i saw u used <style scoped> but in our case end user is submitting the Html+CSS using richTextEditor->insertHtml. i think i have to modify user input and add an extra attribut "scoped" in <style> tag. –  user116017 Apr 9 at 7:50
    
@AndyBrus i tested it is only supported in firefox :( –  user116017 Apr 9 at 12:40
    
@AjayKumar Oh dear, my apologies! I assumed it'd been implemented by at least FF and Chrome by now. –  AndyBursh Apr 9 at 12:52
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.