html - Solving conflicting CSS. How to add selector? -
i developing little module personal use inside existing webapp. (fyi, whmcs). style module output, i'm using a template. however, looks css stylesheets conflicting original (from webapp), , module css applied webapp (which screws view completely.
as far aware, solve adding div module output pages, this
<body> <!-- main navbar --> <div class="navbar navbar-inverse bg-indigo"> <div class="navbar-header"> <a class="navbar-brand" href="index.html"><img src="../modules/addons/webcanyonerp/assets/images/logo_light.png" alt=""></a> <ul class="nav navbar-nav pull-right visible-xs-block"> <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li> </ul> </div> <div class="navbar-collapse collapse" id="navbar-mobile"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-git-compare"></i> <span class="visible-xs-inline-block position-right">git updates</span> <span class="badge bg-warning-400">9</span> </a> <div class="dropdown-menu dropdown-content"> <div class="dropdown-content-heading"> git updates <ul class="icons-list"> <li><a href="#"><i class="icon-sync"></i></a></li> </ul> </div> ...... </body>
becomes:
<body> <div class="mymodulecss"> <!-- main navbar --> <div class="navbar navbar-inverse bg-indigo"> <div class="navbar-header"> <a class="navbar-brand" href="index.html"><img src="../modules/addons/webcanyonerp/assets/images/logo_light.png" alt=""></a> <ul class="nav navbar-nav pull-right visible-xs-block"> <li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li> </ul> </div> <div class="navbar-collapse collapse" id="navbar-mobile"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-git-compare"></i> <span class="visible-xs-inline-block position-right">git updates</span> <span class="badge bg-warning-400">9</span> </a> <div class="dropdown-menu dropdown-content"> <div class="dropdown-content-heading"> git updates <ul class="icons-list"> <li><a href="#"><i class="icon-sync"></i></a></li> </ul> </div> ...... </div> </body>
so can limit css "mymodulecss". then, after that, have alter (module) css files, applied "mymodulecss"
can tell me if approach correct, , easiest way alter css looks @ "mymodulecss" selector?
thanks!!
you can try deploying :nth-of-type(n)
style declarations want take precedence.
the pseudo-class :nth-of-type(n)
give style declarations increased specificity (overriding cascade), without necessitating update or alteration mark-up.
for example:
local css:
aside:nth-of-type(n) { background-color: red; }
external css:
aside { background-color: blue; }
the background-color
of every <aside>
remain red
, though background-color
re-declared blue
, later in cascade (in external css).
Comments
Post a Comment