Doubts about the specificity in CSS3

Question

I don't understand even if I have studied the specificity why my CSS rule below is not applied.

CSS

    body {
  font-family: 'BNPSans', Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: black; }

/** 
    Navbars
*/
.navbar#brandbar {
  min-height: 38px; }
  .navbar#brandbar .navbar-toggle {
    margin-top: 2px;
    margin-bottom: 2px; }
    .navbar#brandbar .navbar-toggle .icon-bar {
      background-color: white; }
  .navbar#brandbar .navbar-nav li a {
    font-family: 'BNPRounded', Arial, Helvetica, sans-serif;
    opacity: 1;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 27px;
    text-decoration: none; }
  .navbar#brandbar .brand-menus {
    margin-right: 50px; }
  .navbar#brandbar .brand-textsize {
    border-left: 1px solid #008754; }
    .navbar#brandbar .brand-textsize li {
      border-right: 1px solid #008754; }
  .navbar#brandbar .navbar-header a.navbar-brand {
    text-transform: uppercase;
    margin: 0 0 0 50px;
    color: #000 !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 27px; }
    .navbar#brandbar .navbar-header a.navbar-brand strong {
      color: #bfe5d7;
      margin: 0 0 0 5px; }

.topbar p {
  fonts-font-family: 'BNPPSans', Arial, Helvetica, sans-serif;
  fonts-opacity: 1;
  fonts-font-size: 52px;
  fonts-color: #7c7c7c; }

And here my HTML:

<div class="row topbar">
    <div class="col-md-10 col-md-offset-1">
        <div class="row">
            <!-- logo and text -->
            <div class="col-md-4">
                <img class="img-responsive" src="assets/img/bnpp-logo.png"></img> <p>PROVA</p>
            </div>
            <div class="col-md-4">
            </div>
            <div class="col-md-4">

            </div>
        </div>

    </div>
</div>

In this case we have two rules that can affect it: .body, .topbar p

The first one has specificity 0001 and the second one 0011 ... Why is the body rule applied ?

The .topbar p's css isn't valid css. I think that's why it's not applying. — Tdelang, Sep 18 '15 at 09:18
Why ? I have the topper class and there is
element nested.... — Silvio S., Sep 18 '15 at 09:37
try font-family instead of fonts-font-family etc. for example is what I meant — Tdelang, Sep 18 '15 at 09:39

score 0 · Answer 1 · answered Sep 18 '15 at 09:49

0

SOLVED

It was a stupid thing about the namespace. My scss file was wrong I was generating the fonts from this source

.class {
 fonts: 
 {
    family....
 }
}

Obviously the right one was:

 font: {
    family: etc;
    size: etc;
  }

Font is the right NAMESPACE.

answered Sep 18 '15 at 09:49

Silvio S.

547
5
20

Yet another reason to avoid using unnecessary tools such as CSS preprocessors, with poor error messages and bad lintability. If you have to look at the CSS it generates to figure out if it's doing the right thing, then what's the point? It's like using a C compiler that you couldn't trust or debug unless you looked at the assembler code it generated. By the way, this problem could have been debugged easily enough by looking at the style inspector. Most likely you would have seen the `fonts-font-family` property marked as in error, and reported as "unknown property". – Sep 18 '15 at 09:52
It is true :) @torazaburo do you think that SASS is not good ? – Silvio S. Sep 18 '15 at 13:22
I think it's unnecessary and potentially harmful. – Sep 18 '15 at 13:46

Doubts about the specificity in CSS3

1 Answers1