rhill45 rhill45 - 4 years ago 131
CSS Question

How to prevent specific css style sheet from styling a specific html tag

I am incorporating bootstrap into my pages, but it's altering some of the spacing in an edge script and some of the borders in my nav menu. I would like to "turn off" bootstrap css styling is some of my div tags. How can I do this? As an example I would like to prevent my local bootstrap css file from styling the following #logo tag:

<head>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="logo">
<script type="text/javascript" charset="utf-8" src="logani_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-915774383 { visibility:hidden; }
</style>
<div id="Stage" class="EDGE-915774383"> </div>
</div>
</body>

Answer Source

You cannot. CSS works so that all style sheets that apply to the document apply to it as a whole. The drafted scope attribute of style element may change this one day, but even with it, you would be able to restrict the applicability to a specific element and its descendants, not to exclude.

So if you are using, say, the Bootstrap CSS, you need to deal with. You can inspect (using a browsers developer tools) how it affects a particular element, and then you can override those settings if needed by using rules that “beat” them in the cascade.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download