Advanced CSS Selectors

Sometimes you need to apply a CSS style to an element, but you don't want to apply it to all elements with the same tag, class or ID. In this exercise, you will use advanced CSS selectors to apply CSS styles to some elements but not others.

Follow the steps below to complete this exercise. Do not modify the index.html file.

1. Use the Child Selector to change the text that reads "All of your messages with Won are shown below." Make this text white without changing the colour of any other text.
2. Reduce the space between the text in step 1 and the messages. Use the margin-bottom property to remove the bottom margin on the text.
3. Use the Child Selector to change the text at the bottom that reads "Last message received Yesterday, 7:38pm.". Change the font-size to 12px and use the text-align property to center the text.
4. Use the :last-child Selector to change the last message in the list. Add a box-shadow of 4px 4px 0 #dba944 so that it stands out.

When you complete this exercise it should look like the image below.

.

Hint: All of the selectors you need are described in this guide.