Doing quotes in CSS

Question

I have some legacy CSS I wanted to clean up. Person who wrote it is not available for consultation. The following rule does not validate (CSS 2.1):

html[lang=en] q: before, : lang(en) q: before {
    content: "“";
}

Would it be safe to assume that the author mean the following (this validates):

html[lang=en] q:before, q:lang(en):before {
    content: "“";
}

Also, is the first selector different from the second one in any way? Is each specific to a certain browser?

Thanks.

Answer 1

this is definately wrong :

before, : lang(en)

the , : can't be used like this, the comma indicates a new "rule", the colon a pseudp property (like in a:link).

P.S. do content and before work in IE?

Answer 2

This selector does not appear to work in Firefox:

: lang(en) q: before

It is probably supposed to be

:lang(en) q:before

Which is not the same as

q:lang(en):before

You can see this in action with the following test case:

:lang(en) q:before {
  content: "a";
}
q:lang(en):before {
  content: "b";
}

<div lang="en">
<q lang="zh">Hello zh</q> <q lang="en">Hello EN</q> <q>Hello Plain</q>
</div>

This gives

 a"Hello zh" b"Hello EN" b"Hello Plain"

Basically the :lang(en) q:before rule says "Before any Q inside any element with English language", while q:lang(en):before says "before any Q that is in the English Language".

Also, the two selectors that are used (html[lang=en] q:before and :lang(en) q:before) are not exactly equivalent but will achieve the same effect most of the time if the browser in question understands one of the selectors. :lang(en) is a newer selector that identifies the language while html[lang=en] is an attribute selector that merely identifes some attribute called lang.