Contextual Selectors in CSS2

Question

I'm wondering why styling an element within a specific class, like this:

.reddish H1 { color: red }

is shown as an example of correct syntax in the CSS1 specification under Contextual selectors:

Cascading Style Sheets, level 1

but it's not shown as an example in the CSS2 spec:

Cascading Style Sheets, Level 2

At least I can't find an example of it. Has the syntax rules for this changed in CSS2, or is it simply inferred as correct syntax?

Answer 1

That syntax is correct, but the example may have changed for a couple of reasons.

Firstly it is not best practice to name classes by the description of what they do. In the case of .reddish h1, the example CSS shows that it is to be coloured red. However, if in a later design change the h1 should in fact be blue then

.reddish h1 { color: blue; }

makes little sense. You should name your classes by their function or purpose on the page and not by what style they are supposed to represent.

Secondly, it isn't advised to use keywords for colours, as the colour you receive is down to browser interpretation. Instead, of 'red' you should use the hexcode '#ff0000' to get an accurate colour in all browsers. (red may not be the best example here, but there are some strange colour keywords out there).

While neither of these things is that bad, they both could add up to why the example had changed in the spec.

Answer 2

You should write elements in lowercase letters (h1, not H1).