question in regard to precedence of CSS selectors

Giganews Newsgroups
Subject: question in regard to precedence of CSS selectors
Posted by:  Zhang Weiwu (zhangwei…@realss.com)
Date: Thu, 05 Jun 2008

Hello!

I wrote this:
..required-question p:after {
    content: "*";
}

Corresponding HTML:
<div class="required-question"><p>Question Text</p><input /></div>
<div class="not-required-question"><p>Question Text</p><input /></div>

The intention is: if a field is required, the <p> in it should have a
"*" appended to it. This doesn't work on Firefox 2.

The following works, but is not what I want to have:

..required-question:after {    content: "*";}
..required-question p {    color: maroon;}

The best solution would be to move class="required-question" to <p> but
that would require change to Javascript which was not very practical due
to a lot of reasons.

My question is: I don't understand why ".required-question p:after"
doesn't work. Is it something wrong with precedence of CSS selector?
a.k.a. should it be something like "(.required-question p):after"?

Best regards
Zhang Weiwu

Replies