IE7's attribute selector and @for

Forum Moderators: not2easy

Message Too Old, No Replies

IE7's attribute selector and @for

Robin_reala

1:18 pm on Jul 31, 2007 (gmt 0)

So, given the following code:

HTML:

<label for="foo">test</label>
<label class="foo">test</label>

CSS:

[for],[class] { background: green; }

any ideas why the first isn't working in IE7? Seems like a rather annoying omission :(

[edited by: Robin_reala at 2:18 pm (utc) on July 31, 2007]

penders

1:27 pm on Jul 31, 2007 (gmt 0)

Not sure, but don't you need to prefix with the universal selector (*) ...?


*[for], *[class] { background: green; }

Robin_reala

2:17 pm on Jul 31, 2007 (gmt 0)

Nope, in the same way that you don't have to do *.foo or *#foo. I tried it anyway, but no luck. Thanks for the suggestion though.

whoisgregg

2:30 pm on Jul 31, 2007 (gmt 0)

The Microsoft document about the attribute selector [msdn2.microsoft.com] might be helpful:

Attribute selectors are enabled only in standards-compliant mode (strict!DOCTYPE).
Attributes are case-sensitive.

Robin_reala

2:40 pm on Jul 31, 2007 (gmt 0)

That's just a snippet of my testcase - the whole thing is running in CssCompat mode as proved by the working attribute selector for the class.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Test</title>
 <style type="text/css">
 [for],[class] { background: green; }
 </style>
</head>
<body>
<label for="foo">test</label>
<label class="foo">test</label>
</body>
</html>

(yeah, I know, I ought to revise it to HTML over XHTML. Does the job currently though)

appi2

3:48 pm on Jul 31, 2007 (gmt 0)

Might be 'for' is a reserved word?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
[for], [class], [if], [while] { background: green; }
[fee] { background: green; }
[id] { background: green;}

</style>
</head>
<body>
<label fee="foo">test</label>
<label while="foo">test</label>
<label for="foo">test</label>
<label if="foo">test</label>
<label class="foo">test</label>
<label id="foo">test</label>
</body>
</html>

appi2

4:11 pm on Jul 31, 2007 (gmt 0)

Sorry being dim!
Ignore.