Selector Matching Exercise
Your mission in this simple exercise is to match the two elements where I have put *** around the text - with one selector - and without affecting any other elements. Make those two elements red and boldfaced.
A second paragraph with *** some emphasized text. ***
And a third paragraph with a link.
- List item one in second <div>.
- List item two.
- List item three.
And this is more filler text - in a paragraph in the second <div> - with a *** link ***.
The Markup
Here's a look at the skeleton of that bit of markup above, assuming that it were an entire document. I have inserted three red asterisks to highlight the elements we want to match.
<body> <h2></h2> <div> <p><em></em></p> <p><em>***</em></p> <p><a href="http://www.cbsnews.com"></a></p> </div> <div> <ol> <li></li> <li></li> <li></li> </ol> <p><a href="http://www.abc.com">***</a></p> </div> </body>
The Document Tree
And here's the doctree image with the elements we want to match highlighted:
The Solution
Or A Solution. If I wanted to match those elements, here's the thought process I would go through and the steps I would take to build the selector:
- Both elements are descendants of a
div, so I would start my selector withdiv - Then, both are also subordinate to "second-children." The way I would get to the "second-child" is to use
:first-child + *. Now my selector looks like this:div > :first-child + * - And finally, both elements are children of those elements (where we are so far), so it's a simple matter of adding
> *to my selector, which now looks like this:
div > :first-child + * > *
And it works!
Remember that this is just one possible solution. There are others. It's the process that's important - how you get to a match of the two elements. It's important to find a way to match two different elements with one selector, using the selectors and combinators covered in this week's reading. It's a question of (a) what makes these two elements alike? And (b) what makes both of them (together - sort of as one) unique? This should help with questions 3, 4 and 5 on the quiz.