473,324 Members | 2,313 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,324 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 2519
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...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

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.