Introduction to CSS3: Mistake in an exercise or the code

[JoseUusitalo]

I believe there is either a mistake in the first task of the Test your understanding exercise or the code of selectors.html. The first task is as follows:

1. Modify the selectors.html and selectors.css files so that the first, third, and fifth paragraph appear underlined (in addition to the existing formatting). You should achieve this with a single CSS rule.

It asks you to add an underline to the 1st, 3rd, and 5th paragraphs with a single CSS rule. I believe this is impossible. The relevant HTML code for the selectors.html page where this underline is to be applied is as following (with the paragraphs numbered for clarity):

<h1 class="alert">Classes and identifiers.</h1>

1st: <p>This is a regular paragraph.</p>

2nd: <p>This is a regular paragraph, too.</p>

3rd: <p class="alert">This paragraph belongs to a special group of paragraphs. It is a member of 'alert' class.</p>

4th: <p id="unique">This paragraph should be uniquely formatted. It is assigned an identifier.</p>

5th: <p class="alert">This paragraph is in 'alert' class, too.</p>

Because there is no difference between the 1st and 2nd paragraphs I do not think you can apply an underline to only the 1st paragraph in addition to the 3rd and the 5th with a single CSS rule.

Either the alert class was supposed to be applied to the 1st paragraph and not the header in the HTML code, or the task was supposed to ask for an underline on the header and the 3rd and 5th paragraphs.

[vesavvo]

Yes. However, I was thinking of the use of 'nth-child' selector. One could write a rule for 'p:nth-child(odd)' which should produce the desired outcome. (However, as the rule would also be applied to the - yet to be added - 7th, 9th etc. paragraphs, this might not be the ideal solution.) Maybe the assignment needs to be rephrased.

[JoseUusitalo]

I was not aware of the nth-child selector while I was working on that worksheet. It does indeed work but for some bizarre reason the CSS code:

p:nth-child(odd) {
    text-decoration: underline;
}

underlines paragraphs number 2 and 4, while p:nth-child(even) underlines the correct paragraphs 1, 3, and 5.