question in regard to precedence of CSS selectors

[Zhang Weiwu]

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 <pin 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 <pbut
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

[Jukka K. Korpela]

Scripsit Zhang Weiwu:

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

That's questionable (pun intended), because the usual CSS Caveats (see
http://www.cs.tut.fi/~jkorpela/css-caveats.html ) apply particularly
strongly: generated content is not supported by IE at all. You should
not _rely_ on CSS as regards to conveying essential information, such as
whether an answer is required or optional. Using CSS to give additional
hints, such as visible color in addition to textual note, is quite OK of
course.

<div class="required-question"><p>Question Text</p><input /></div>

More logically, the question text or its last part should be marked up
as <labelfor the <inputand it should not be a paragraph. Arguably,
the question and the input field together might be construed as a
paragraph. This is relevant since it affects the default (non-CSS)
rendering; moreover, it is easier to start styling when the default
rendering is closer to the desired one and you don't have e.g. default
vertical spacing to kill. (We don't want a field to be separated from
the question by an empty line.) I would use

<p class="required-question"><label for="q42">Question
Text</label><input id="q42" ...></p>

(or maybe with <divinstead of <p>).

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

Works for me on Firefox 2.0.0.14. With the markup I suggested, the CSS
code would have "label" instead of "p", i.e.

..required-question label:after {
content: "*";
}

and that works, too.

You may have made some mistake elsewhere on the page, but in the absence
of a URL, it cannot be analyzed.

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.

If that is so, then you may well have a robustness problem with
JavaScript, too. How does the page work when JavaScript is disabled?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Andy Dingley]

On 5 Jun, 10:13, Zhang Weiwu <[e-mail]:

This doesn't work on Firefox 2.

Works for me. You only posted a fragment, not a URL to an example
page. So I suspect that it's the rest of your page / doctype / HTTP
headers / CSS that's causing the problem instead.

Post a URL.

This is why we always ask people to post URLs not fragments.

[Zhang Weiwu]

Jukka K. Korpela wrote:

Scripsit Zhang Weiwu:

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

generated content is not supported by IE at all. You should not _rely_
on CSS as regards to conveying essential information, such as whether
an answer is required or optional.

Normally I shouldn't. I'm lucky enough to have a local deployment with
limited users so everyone use either Firefox or Opera as required. We
reduce number of browsers user can use also because we wish to reduce
training cost and support cost (supporting IE in China can be difficult
thanks to extremely high percentage of malware installation that makes
IE cannot behave the same for different users).

Works for me on Firefox 2.0.0.14. With the markup I suggested, the CSS
code would have "label" instead of "p", i.e.

.required-question label:after {
content: "*";
}

and that works, too.

Thank you very much for the suggestion. Now I use <labelin place of
<p>. I also found that in my web application
required-question label:after
doesn't work in Firefox 2.0.0.14 but works fine in Firefox 3 and Opera,
which makes me believe it is somewhere in my javascript trigged a bug of
Firefox 2 that was already solved in 3. It can happen because all
elements are dynamically generated with javascript.

>
You may have made some mistake elsewhere on the page, but in the absence
of a URL, it cannot be analyzed.

I think Firefox had some mistake elsewhere on the page:) But since
Firefox 3 is releasing tomorrow I'll ignore this problem and convince
everyone to upgrade. This is possible because we have a local use
environment with limited number of users.