Closed Bug 249144 Opened 20 years ago Closed 20 years ago

CSS element precedence is incorrect for pseudo-classes

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: dweaver, Assigned: bugzilla)

Details

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.
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
Closed: 20 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.