Link External CSS File Only for Specific Div

Link external CSS file only for specific Div

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.

Load an external CSS for a specific DIV

CSS applies to entire documents.

If you want to limit the scope, then you need to make use of a descendent selector.

e.g. #id_of_div .the .rest .of .the .selector {}

You have to apply this to every selector, and take into account groups (so it isn't as simple as just prefixing the whole stylesheet and suffixing every })

You would also find the stylesheet for the main document applying to your preview.

A frame would probably be the best approach to solving this problem.

How to link external css file affecting only on 1 div and unaffecting all other divs

I think that one solution could be to add a class "without-mdb" to your form and add ":not(.without-mdb)

How to include stylesheet file only for one div?

Whenever you add a css file to the page, it applies to the whole document. However looking at your code, what I think you're trying to do is display 1 chunk of html under one condition and another chunk under a separate condition. To do this change your code to this:

<?php
    switch ($type_show1):   
    case 'welcome1':
    //default:
?>
         <link href="css/main.css" rel="stylesheet" type="text/css" /> 

<?php
    break;
    case 'welcome2'  :
?>
         <link href="css/main2.css" rel="stylesheet" type="text/css"/>    

<?php
    break;
?>

                <div class="page-header">
                    <div class="page-title">
                        <h5>Booking Management</h5>
                        <span>Good morning, Admin!</span>
                    </div>
                </div>
                <!-- /page header -->

Speaking to what you actually said about using one stylesheet per element. It is possible using Web Components, http://webcomponents.org/, and shadow DOM, http://webcomponents.org/articles/introduction-to-shadow-dom/, but I think in your situation it would be best to simply give each div an id or a class and apply the css specifically to that id or class from one css stylesheet.

UPDATE

To apply CSS to two different divs do this:

HTML

<html>
    <head>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="page-header" id="div1">
            <div class="page-title">
                <h5>Booking Management</h5>
                <span>Good morning, Admin!</span>
            </div>
        </div>
        <div class="page-header" id="div2">
            <div class="page-title">
                <h5>Booking Management</h5>
                <span>Good morning, Admin!</span>
            </div>
        </div>
    </body>
</html>

CSS (main.css)

#div1 {
    //Some CSS Styles to apply to the first div
}
#div2 {
    //Some CSS Styles to apply to the second div
}

Limit scope of external css to only a specific element?

UPDATE Support for this feature has been dropped. Please seek other options

Original Post:

You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.

The basic idea is

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

However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.

One alternative would be to use an iframe.

Link External CSS File Only for Specific Div