Restrict a div to get only perticular stylesheet

Question

1.00/5 (1 vote)

See more:

Hi i am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements. Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that perticular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div. Is there any possibilities?

(I wonder if this is possible in this way ;)

HTML

<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.cc">  my ui elements here </div>

, i know its not possible in this way )

NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.

Posted 9-Oct-14 1:16am

Sibeesh KV

Updated 9-Oct-14 1:43am

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 9-Oct-14 11:33am

It all makes no sense. CSS usage is very simple and logical. And your idea is not. Element's style is defined by one or more CSS classes, not a stylesheet (which is just a file).
Add your own style sheet and use it. Or use the same one. Stylesheets cannot be "affected", they affect the rendering. Artificial problem, I would say...
—SA

[no name] 9-Oct-14 11:42am

But i am ready to use the stylesheet , he problem is when i drag and drop the new style sheet my existing UI element also getting affected. So the only possibility is to restrict the style sheet to that div.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sibeesh KV · Accepted Answer · 2014-10-09T05:45:00

Solution 1

I have found the answer myself , after 2 hours of search in Google.

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>

Read here : http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element[^]

As Richard Deeming suggested, I am adding that option here. Thank you Richard Deeming
By default, that only works in Firefox:
http://caniuse.com/#feat=style-scoped

For all other browsers, you'll need a polyfill, as mentioned in the linked SO thread:
https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

Posted 9-Oct-14 5:45am

Sibeesh KV

Updated 31-Oct-14 0:14am

v2

Comments

Richard Deeming 9-Oct-14 13:13pm

By default, that only works in Firefox:
http://caniuse.com/#feat=style-scoped[^]

For all other browsers, you'll need a polyfill, as mentioned in the linked SO thread:
https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin[^]

[no name] 9-Oct-14 13:16pm

Thanks a lot for the great information . My vote of 10

Thanks7872 31-Oct-14 5:11am

And then also you have accepted your own solution? Why?

Do you know what does it mean by accepting the solution?

[no name] 31-Oct-14 5:57am

Yes, may i know why there is a button called "I've solved this myself!" ? After a lot of searching only i found this answer!. And i thought to share it here. What is the problem in it? Why did you down vote my answer sir?

Thanks7872 31-Oct-14 6:01am

This code won't work with all the browsers,hence can not be a solution. After a lot of searching if you manage(I don't call it 'solve') your issue, that doesn't become solution.

[no name] 31-Oct-14 6:13am

Please see the comments sir.

Richard Deeming at 9-Oct-14 13:13pm
Reply
By default, that only works in Firefox:
http://caniuse.com/#feat=style-scoped[^]

For all other browsers, you'll need a polyfill, as mentioned in the linked SO thread:
https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin[^]

Thanks7872 31-Oct-14 6:17am

So to apply CSS to a specific part of the page, you will use plugin in your app? I don't see any convincing point here.

[no name] 31-Oct-14 7:14am

That was my requirement sir. And my manager was satisfied with that. There was no other way for me.