Home/ Questions/Q 6832613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:52:47+00:00

Is there any way to stop the conflict between same class or id of

  • 0

Is there any way to stop the conflict between same class or id of multiple css files. As I am explaining below for better understanding:

There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files. Let’s suppose if any class of master page has the same name to reloaded elements’ class while properties are different. Then how should I handle this to stop the conflict.

master.html

<html> 
    <head> //attached master.css file here </head>
    <body> 
        <div class="myClass"> </div>
        <div class="dynamic"> /* often reload elements by ajax */ </div> 
    </body>
</html>

master.css

.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }

now i am showing the reloaded html elements & css files into dynamic div of master page 

reloaded tag line by ajax : <div class"myClass"> </div>

reload.css

.myClass{height: 30px; width: 25px; background: yellow; }

Now as you can see there are two classes with same name but different properties. Then how should I stop the confliction?

@Edit Thanks everyone for your support & time but my problem is different here.
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server.
so whatever the contents loads in dynamic div, it’s coming from client side (e.g. tag lines & css, js). in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn().

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could apply the cascading rules of the CSS:

    In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.

    you adjust the reload.css rules to 

    .dynamic .myClass{height: 30px; width: 25px; background: yellow; }

    The cascading rules which are applied when determine which rules should apply to html div could be referenced here

    Updated 11.23

    As the OP only have control over master.css, the above solution won’t work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:

    body > .myClass {...}

    This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.

    • 0