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

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -