1

I have a simple problem which I can not solve despite of all my research and trying. I want to move a css property out to a file. In the code snippet below the fist <li> Element ist not displayed properly where as the second is.

My CSS File:

.navBarItem
{
    padding-left: 0px;
}

My HTML File:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js" integrity="sha384-mXQoED/lFIuocc//nss8aJOIrz7X7XruhR6bO+sGceiSyMELoVdZkN7F0oYwcFH+" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/design.css" />
</head>

<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-collapse collapse" id="navBar">
                <ul class="nav navbar-nav">
                    <li><a href="#" class="navBarItem">Action</a></li>
                    <li><a href="#" style="padding-left:0px;">Action</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

I thought that putting the given property in another file would make no difference, especially when I import that css file at the very last.

JRsz
  • 2,891
  • 4
  • 28
  • 44
  • 2
    It should work, but it's more complicated - see [this question](http://stackoverflow.com/questions/2876575/css-rule-priorities) and [MDN: Specificity](https://developer.mozilla.org/en/docs/Web/CSS/Specificity). Check your browser console HTML tab to see which rule trumps yours and make it at least as specific (or add `!important`). – Kenney Apr 11 '16 at 19:21

3 Answers3

3

In the first case (using the class) you play by the specificity of the actual selector you use. .navBarItem is a single class so it would be overriden by anything more specific.

in the second case however you use the style attribute (inline styling) which has the highest specificity (besides using !important)

So the problem is not that the rule is in an external file but that it is overriden by some other rule with higher specificity.

In your specific case the offending rule is .navbar-nav > li > a in the bootstrap.css file.

Setting up your rule as .navbar-nav .navBarItem{padding-left:0} would fix it.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Though this does not show me how to solve it, it helps understand the cause. But isn't the identifiaction with a class stronger then the identification of an attribute, Since there are no other id oder class attributes? – JRsz Apr 11 '16 at 19:31
  • 1
    that is not the identification of an attribute. The attribute specificity refers to creating a selector on your css file that targets an attribute like `[href]{color:red;}` which would style all elements with a `href` attribute. Using the actual `style` attribute inline (*in the html*) to style an element is the highest order. You would have to find the rule that overrides your own and create a more specific one. – Gabriele Petrioli Apr 11 '16 at 19:40
  • 1
    @JRsz updated answer to include a more specific rule for your case. – Gabriele Petrioli Apr 11 '16 at 19:43
  • Yeah, that works. thank you a lot. I can continue working now :) – JRsz Apr 11 '16 at 19:45
2

Your style rule is overruled by 'theme.less' and 'bootstrap.css'. The easiest fix to your problem is changing your css to:

.navBarItem {
  padding-left: 0px !important;
}

So that your new attribute is considered of the highest importance.

If you right click the first 'Action' link and Inspect Element (Chrome), you will see that the exact css attribute that overrides your own styling is this:

.nav > li > a //found in bootstrap.css at line 3972

Now, for your own rule to be of highest importance, you have to keep the inheritances from the first attributes and replace "a" with your own class, like so:

.nav > li > .navBarItem {
  padding-left: 0px;

}

arch1ve
  • 183
  • 1
  • 12
  • This does solve the problem but do you know of a way without using !important? – JRsz Apr 11 '16 at 19:33
  • 1
    I edited the original answer to suit your needs. The problem is that the more specific the definition of the rule is (i.e. .nav > li > a), the higher its importance over a simpler one (i.e. .navBarItem). – arch1ve Apr 11 '16 at 19:43
  • This is nice, works perfect, thank you. Is there a "better" way or are bothe equally efficient? – JRsz Apr 11 '16 at 19:43
  • 1
    There is no 'better' way, it is just better to use any method that helps you understand the code when you read it again later. Also, the Web Inspector is a _very_ powerful tool that you should be using whenever something doesn't work in your web application. I suggest learning how to use it first so it will be easier for you later. – arch1ve Apr 11 '16 at 19:45
1

I believe your problem has to do with the location of your file. You linked the file to css/design.css

<link rel="stylesheet" href="css/design.css" />

you would need the css directory to be in the same directory as your html file, for example:

  • public.html
    • index.html //your html page
    • css
      • design.css

if this isn't the problem, please comment me on how your files are structure so what this can be ruled out as the problem.

Webeng
  • 7,050
  • 4
  • 31
  • 59
  • That is exactly how it is. The directory "css" is in the same dir as the index.html. I think it has to do something with the specificity, though I have no "nice" way to solve this issue. – JRsz Apr 11 '16 at 19:29