CODEWITHSUNDEEP
htmlcss
mitch2k
mitch2k

Reputation: 526

Solving conflicting CSS. How to add selector?

I am developing a little module for personal use inside an existing webapp. (fyi, WHMCS). To style the module output, I'm using a template. However, now it looks like those CSS stylesheets are conflicting with the original (from the webapp), and the module CSS is also applied to the webapp (which screws the view completely.

As far as I am aware, I could solve this by adding an extra div to all my module output pages, like 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 then I can limit the css to "mymodulecss". Then, after that, I have to alter all (module) css files, so they are only applied to "mymodulecss"

Can you tell me if that approach is correct, and what the easiest way is to alter the css so it looks at the "mymodulecss" selector?

Thanks!!

Upvotes: 2

Views: 869

Answers (3)

mitch2k
mitch2k

Reputation: 526

I solved it by adding 

<div class="mymodulecss">

and using Less:

add selector to each line in css file

Upvotes: 0

Rounin
Rounin

Reputation: 29493

You can try deploying :nth-of-type(n) to style declarations you want to take precedence.

The pseudo-class :nth-of-type(n) will give style declarations increased specificity (overriding the cascade), without necessitating any update or alteration to the 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> will remain red, even though the background-color is re-declared as blue, later in the cascade (in the external CSS).

Upvotes: 1

Wamadahama
Wamadahama

Reputation: 1648

First try to move around the <link> so the one your want to take precedence is loaded last.

For example 

<link rel="stylesheet" href="limitless-reseponsive.css">
<link rel="stylesheet" href="foo.css">
<link rel="stylesheet" href="mymodulecss.css"> <!-- The styles in here will take precedence over the other two -->

Source: What is the order of loading the CSS files in a HTML page?

Also you might want to try adding !important to the end of the important styles

For example

  div {
    padding: 15px !important;
  }

Edit: As Paul said, this is not best practice.

Upvotes: 0

Related Questions