473,221 Members | 1,914 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,221 software developers and data experts.

question in regard to precedence of CSS selectors

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
Jun 27 '08 #1
3 2509
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/

Jun 27 '08 #2
On 5 Jun, 10:13, Zhang Weiwu <zhangwe...@realss.comwrote:
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.
Jun 27 '08 #3
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.
Jun 27 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: Alex | last post by:
could somebody tell me the difference between those two styles: function abc(var1, var2){ /* logic in here */ } and abc = function(var1, var2){ /* logic in here */ }; When / why would I...
8
by: der | last post by:
Hello all, I've a question about order of evaluations in expressions that have && and || operators in them. The question is: will the evalution go left-to-right, no matter what -- even if the...
26
by: myName | last post by:
a && b || c is evaluated as (a && b) || c or it is evaluated as a && (b || c)
2
by: VB Programmer | last post by:
Using CSS in my ASP.NET app. What is the difference between an element and a class? When should they be used? Element example: Q1A1{.....} Class example: .Q1A1{.....} Also, I've seen...
5
by: Jim Garrison | last post by:
In reading someone else's stylesheet I ran across the following two selectors, in the following order. #footer .label { ... } #footer .label { ... } Are these not identical in effect? If...
56
by: spibou | last post by:
In the statement "a *= expression" is expression assumed to be parenthesized ? For example if I write "a *= b+c" is this the same as "a = a * (b+c)" or "a = a * b+c" ?
5
by: fdmfdmfdm | last post by:
Associativity in C takes two forms: left to right and right to left. I think the K&R book lacks something... For example, *p++, since the associativity is from right to left, do this expression...
7
by: linq936 | last post by:
Hi, I am puzzled on this C puzzle: How to interpret this C statement: sizeof (int) * p Is that the size of integer type multiplies p or the size of whatever p points to in integer type? I...
25
by: mdh | last post by:
Given the expression: while (isaspace(c = *s++)) x+1; (s is an array) Does the increment to 's' occur after "x+1" is evaluated, or after the content of s is assigned to c? Is there a...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.