CSS class with attribute does not work with !important

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
--
minor
RESOLVED INVALID
8 years ago
8 years ago

People

(Reporter: Chris, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729) FirePHP/0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729) FirePHP/0.4

CSS: 

        .firstnav_item {
            opacity: 0.75;
        }

        .firstnav_item[class="selected"]  {
            opacity: 1 !important; 
        }

Using jQuery and AddClass("selected") (maybe in a click event) to an element with class firstnav_item the item does not change its opacity to 1.

Reproducible: Always

Steps to Reproduce:
1. See description

Actual Results:  
The element keep 0.75 transparency after adding the class "selected"

Expected Results:  
The element should have transparency 1 after adding the class "selected"
.firstnav_item[class="selected"] is guaranteed never to match anything.

[class="selected"] is a selector for *exact* attribute matching.  It won't match if the class attribute also contains .firstnav_item.

A class selector .foo is equivalent to [class~="foo"].  So the following four selectors all might do what you want:

.firstnav_item.selected
.firstnav_item[class~="selected"]
[class~="firstnav_item"].selected
[class~="firstnav_item"][class~="selected"]

I'd recommend the first one since it's the usual practice.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago
Component: General → Style System (CSS)
OS: Windows 7 → All
Product: Firefox → Core
QA Contact: general → style-system
Hardware: x86 → All
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.