473,703 Members | 2,691 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

question in regard to precedence of CSS selectors

Hello!

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

Corresponding HTML:
<div class="required-question"><p>Qu estion Text</p><input /></div>
<div class="not-required-question"><p>Qu estion 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 2548
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>Qu estion 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"><labe l for="q42">Quest ion
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...@rea lss.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
417
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 use one over the other?
8
3347
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 || operator is before the && operator? e,g, In an expression like a = (z>x) || (x<0) && (z-y>9); is it guaranteed that z>x will be checked first?
26
1679
by: myName | last post by:
a && b || c is evaluated as (a && b) || c or it is evaluated as a && (b || c)
2
256
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 that sometimes it is preceded by a # (#Q1A1{...}). What does this indicate?
5
1348
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 not, I'm missing something about attribute selectors. My reasoning is that in the second selector
56
4768
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
2113
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 means *(p++)? I think I am wrong. (so, associativity is not for operand?) But for *++p, right to left associativity means *(++p) is correct. So by definition of associativity, I guess it only applys on grouped
7
1953
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 think it should be the latter because there are 4 parser tokens here, sizeof, int, * and p, the first and the second are of same precedence which are higher than the third and all three operators are
25
1575
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 general rule as to when this type of increment occurs? ( I understand that the increment in "c = ++*s" occurs immediately before assignment, so my guess is the same
0
8743
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
8659
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9239
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9102
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
4417
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4674
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3113
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2424
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2055
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.