1373142 - css does not work when overridden with class attribute

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Jim Michaels]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:53.0) Gecko/20100101 Firefox/53.0
Build ID: 20170518000419

Steps to reproduce:

<style>
    .b_on ul {
    }
    .b_on ul li {
    }
    .b_on ul li a:link {
    }
    .b_on ul li a:visited {
    }
    /*.b_on*/ .folder li {
background-color:blue;
list-style-type:none;
    }
    .b_on li:last-of-type {
    }
</style>
 <div id='b' class='b_on'>
                  <ul>
                  <li class='folder currentListItem'><a href='/test/index.html' class='visitor'>unit tests</a></li>
                  <li class='folder'><a href='/studies/index.html' class='visitor'>Bible study</a></li>
<li>blah</li>
</ul>
</div>


Actual results:

folder displays gray just like regular li's
it seems like the 'folder' class is not taking priority for some odd reason. unfortunately, I have no other good browsers to test with. I am on win7 x64.



Expected results:

the code should have made the folder blue.
but no effect other than gray (which is how I have it set now for list items).

Comment 1

[Robert Longson [:longsonr]]

Attachment: reporter's testcase

Comment 2

[YF (Yang)]

Use "li.folder", otherwise it is https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors.