Lower specificity style being applied, instead of higher specificity hover

Question

As you can see here:

The selector .wrapper-dropdown .label is being applied, instead of the higher specificity .wrapper-dropdown .dropdown li div.liwrap:hover

Why is that? I'm using chrome on osx 10.8, if that's relevant

-edit

This Less: http://hastebin.com/feyurojusa.avrasm
compiles to this css: http://hastebin.com/dihimuquju.css

And this Jade: http://hastebin.com/sipetaqigu.vhdl
Compiles to this html: http://hastebin.com/sufavolumo.xml

Addtionally I've got this small JavaScript handling click events: http://hastebin.com/sufavolumo.xml

Answer 1

The element that is designated by .label is not the same element that is designated by div.liwrap; rather, .label is one of div.liwrap's descendants. Specificity then becomes irrelevant, because the selectors are matching different elements altogether.

The strikethrough simply means that the div.liwrap ancestor's color is being canceled out instead of being inherited because you're giving .label its own color declaration.

If you want .label to inherit from div.liwrap on hover, you need to modify the following rule in your LESS code:

  .dropdown li div.liwrap:hover {
    border-color: #00aeef;
    color: #00aeef;
  }

To something like this:

  .dropdown li div.liwrap:hover {
    border-color: #00aeef;
    color: #00aeef;
    .label {
      color: #00aeef; // Or color: inherit;
    }
  }