Link external CSS file only for specific Div

Question

I need to link external CSS file for specific DIV

i have 3 external CSS file

main.css
bootstrap.css
style.css

I need to link the style.cssfile to specific div <div class="leftmenu"> how do i link to that div

how do i link the style.css file to <div class="leftmenu">

style.css

ul
{
margin:0px;
padding:0px;
list-style-type:none;
-webkit-backface-visibility: hidden; backface-visibility: hidden;  
}
.var_nav
{
position:relative;
background:#ccc; 
width:300px;
height:70px;
margin-bottom:5px;
}
.link_bg
{
width:70px;
height:70px;
position:absolute;
background:#E01B6A;
color:#fff;
z-index:2;
}
.link_bg i
{
    position:relative;
}
.link_title
{
position:absolute;
width:100%;
z-index:3;
color:#fff;
}
.link_title:hover .icon
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);  
}
.var_nav:hover .link_bg
{
width:100%;
background:#E01B6A;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  
}
.var_nav:hover a
{
font-weight:bold;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;  
}
.icon
{
position:relative;
width:70px;
height:70px;
text-align:center;
color:#fff;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
-ms-transition:all .5s ease-in-out;   
float:left;
transition:all .5s ease-in-out;   
float:left;  
}
.icon i{top:22px;position:relative;}
a{
display:block;
position:absolute;
float:left;
font-family:arial;
color:#fff;
text-decoration:none;
width:100%;
height:70px;
text-align:center;
}
span
{
margin-top:25px;
display:block;
}

i have checked the following link example but its little had to know can some one help me how do i link css file to a div

<head>
<link href="../fonticon/flaticon.css" rel="stylesheet">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link href="../css/main.css" rel="stylesheet">
</head>

how do you call `style.css` on your file where you have `
`? can you paste that part of your `head` into your original question? — benomatis, Oct 08 '14 at 18:20
@webeno check my question i have added and read my question i need to link entire CSS file to only one div i entire page — sanoj lawrence, Oct 08 '14 at 18:22
from this folder structure, i'm assuming that your `style.css` file is in the same folder as the file you have this `head` on, correct? — benomatis, Oct 08 '14 at 18:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62694/discussion-between-sanoj-lawrence-and-webeno). — sanoj lawrence, Oct 08 '14 at 18:26
There is no way to "link a css file to a specific div". You can make the css in `style.css` apply only to a certain div using selectors, but your question, as stated, makes no sense. — i alarmed alien, Oct 08 '14 at 18:29
...and why are you inviting me for chat when then you're not answering...? — benomatis, Oct 08 '14 at 18:34

score 34 · Accepted Answer · 2017-02-24T17:03:27.923

Short answer: no.

Other ideas:

Use CSS preprocessor

.leftmenu {
    @include 'style.css';
}

This uses the nesting capability of CSS preprocessors to pre-qualify all the rules in style.css. Replace the @include with your favorite preprocessor's directive for bringing in another CSS file.

Rewrite CSS manually

You can "namespace" the rules in style.css by changing all the selectors to be preceded by a qualifyng .leftmenu.

Rewrite CSS automatically

You could write JS code to rewrite the stylesheet selectors at run-time to prefix the selectors with the class name, which his essentially what this plug-in does: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin. Or you could do this rewriting on the server, whatever language it's written in.

Use `IFRAME` as sandbox

If the content of the thing you want to apply the styles to can be placed in an iframe, you could add the style.css frame to the HTML loaded in the iframe.

That's about it.

Yes these are the best options for specific div/ section for styling with external CSS. I done using CSS Preprocessor(SASS) for rewrite CSS and include in my existing project. — Azhar, Jan 23 '17 at 07:46

Link external CSS file only for specific Div

1 Answers1

Use CSS preprocessor

Rewrite CSS manually

Rewrite CSS automatically

Use `IFRAME` as sandbox

Linked

Link external CSS file only for specific Div

1 Answers1

Use CSS preprocessor

Rewrite CSS manually

Rewrite CSS automatically

Use IFRAME as sandbox

Linked

Use `IFRAME` as sandbox