CSS element precedence is incorrect for pseudo-classes

RESOLVED INVALID

Status

()

Core
CSS Parsing and Computation
RESOLVED INVALID
14 years ago
14 years ago

People

(Reporter: Dave Weaver, Assigned: Blake Ross)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040614 Firefox/0.9
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040614 Firefox/0.9

The bug is evident upon viewing the HTML specified below.

What happens: after clicking on the link, the link turns red.
What should happen: it should stay green.

Why:
see the spec on CSS element precedence here:

http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order

According to this, if both a class and a pseudo-class apply to an element, and
both have the same importance, origin and specificity, then they are to be
treated as having the same precedence, and the last one specified should "win."
While it is debatable where in the link the a:visited pseudo-class is
"specified," I'd argue it's part of the "a" in the tag, making it come before
the class specification and therefore lose out. Regardless of my opinion, this
is how IE and Opera do it.

Reproducible: Always
Steps to Reproduce:
1. Save this as an HTML file:

<html>
<style>
	A:visited { color: red; }
	.test { color: green; }
</style>
<a class = "test" href = "http://slashdot.org">test</a>
</html>

2. View the HTML file.

3. Click on the link.

4. Return to and reload the page.
Actual Results:  
After clicking on the link, the link turns red.

Expected Results:  
It should stay green (see above for reason).

Love your product. I switched to it after getting burned by Microsoft Spyware
Magnet 6.0. Opera is also nice, but I think Firefox is a little more intuitive
to use.

Comment 1

14 years ago
This bug is INVALID.  According to cascade rule 3, a more specific selector
overrides a more general one (the order in which the selectors are specified is
irrelevant).  The specificities of the two rules according to
<http://www.w3.org/TR/REC-CSS2/cascade.html#specificity> are:

A:visited  - (no @id = 0, a pseudo-class = 1,  an  element name = 1) == 011
.test      - (no @id = 0, a class        = 1, *no* element name = 0) == 010

The A:visited rule is more specific than the .test rule, so when the link is
visited the link in question will be red.

Hope that helps!
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Component: General → Style System (CSS)
Product: Firefox → Browser
Resolution: --- → INVALID
Version: unspecified → Trunk
You need to log in before you can comment on or make changes to this bug.