Insomania Insomania - 1 year ago 75
CSS Question

How to include stylesheet file only for one div?

i have to include a css file for only one div and to include another css file for second div. How can we do this?
i have tried Switch cases for this, but when it loads css for one case it is still showing the css effect in other case also.

here is what i have tried so far:

<?php
switch ($type_show1):
case 'welcome1':
//default:
?>
<link href="css/main.css" rel="stylesheet" type="text/css" /> // css to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>
<!-- /page header -->

<?php
break;
endswitch;
?>

<?php
switch ($type_show2):
case 'welcome2':
//default:
?>
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />--> // css not to include
<div class="page-header">
<div class="page-title">
<h5>Booking Management</h5>
<span>Good morning, Admin!</span>
</div>
</div>

<?php
break;
endswitch;
?>


Any Help :)

Answer Source

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
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download