Exercise: Using selectors
Add selectors to the rules to achieve the following:
- The second paragraph is red but the first paragraph remains black.
- The list items with the words
Greek letter
are given lower-case letters. - The list items with the word
Letter
are given letters. This has been done for you as an example. - The list items with the word
Number
are given numbers. This is the default. - In the unordered lists, the list items with the word
Square
are given squares, but the others are not.
Do not change the HTML.
Note:
Hints:
Think about what is true of the second paragraph but not of the first paragraph in the tree structure.
Solution to the exercise
Here is one possible solution to the exercise.
Notice the following:
- The red paragraph is a sibling of a paragraph element, but the black paragraph is not. The next sibling selector is what was used, but the general sibling selector would have worked as well.
- The lists with Greek letters are both ordered lists that are descendants of ordered lists that are descendants of ordered lists. The descendant selector is used twice here.
- The unordered list with squares is a child of a div, but the other ordered list is not. The child selector is what was used, but the descendant selector would have worked as well.
Note:
Hints:
- undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/* Add selector here */ {
color: red;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX