CSS class not applying

Question

HTML:

<nav>
  <ul>
    <li>
      <a href="/">
        <span class="m-icon fa fa-close"></span>
        <span class="m-title">Title 1</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span class="m-icon fa fa-close"></span>
        <span class="m-title">Title 2</span>
      </a>
    </li>
  </ul>
</nav>

CSS:

.m-title {
  border: 1px solid #c42;
}

Problem:

I have this code and the class m-title doesn't work. When I use Chrome inspector tool, the class doesn't appear. I tried to change the class by an id, but the issue persists.

If I modify the CSS

.m-title, .test {
  border: 1px solid #c42;
}

the border was displayed. Why does this ocurr?

Checked:

The classes were added to final CSS file.
All the CSS code is generated by SASS and it doesn't contain errors (not missing brackets, etc).
The issue ocurrs in Chrome, Firefox and Safari (MacOS and Windows).

UPDATE:

I have more cases in my project of CSS clases that don't work (and they should) and I saw a pattern in all. It looks like the final CSS generated by SASS introduces some spaces after the class name. These spaces are added only when I use nested classes.

Here a simplified example: https://jsfiddle.net/cespon/qw34g1tp/1/

I assume that the actual CSS is loading successfully / has been included correctly.... — Zze, Apr 14 '15 at 23:20
I made a fiddle and it seems to be working as intended? https://jsfiddle.net/1y0vunc8/3/ — Zze, Apr 14 '15 at 23:29
Can you screenshot what you mean by the Chrome inspector tools not showing the class? I would suspect a conflicting style with a higher prevalence. If you use the console `$('.m-title')`, do you get the elements expected? — Demonslay335, Apr 15 '15 at 00:05
I added an update with a [js.fiddle](https://jsfiddle.net/cespon/qw34g1tp/1/). — cespon, Apr 16 '15 at 14:22
You have to provide enough code to reproduce the problem. When using Sass, it's your job to be examining the compiled output to verify that it is correct. — cimmanon, Apr 16 '15 at 14:59

score 1 · Answer 1 · answered Apr 16 '15 at 14:29

It is because the whitespace character immediately after .m-title in the CSS is not a space, it is some other character (that looks like a space). So the browser thinks that character is part of the class name. Remove that whitespace and try again, works in the jsfiddle when you replace the whitespace with an actual space character.

CSS class not applying

1 Answers1