20 multiple selectors


#1

div div p {
font-size: 30px;
whats wrong with this code?


#2

The code you used above is copied from the lesson example, and is not what is asked for in the instructions:

Give the paragraphs inside the list item tags a font size of 30px.

Looking at the target markup:

    <div>
        <ul>
            <li><p>Grab me!</p></li>
            <li><p>Me, too!</p></li>
        </ul>
    </div>
    <p>Don't grab me!</p>

We see there are two list items, each containing a paragraph node. To target only these paragraphs, and not the last one, we use a combinator called a descendant selector. In the lesson example,

div div p

p is a descendant of div which is also a descendant of div so the markup will appear like this:

    <div>
        <div>
            <p>This P-Node is a child and a grandchild</p>
        </div>
    </div>

So how might we target the P-Nodes in the exercise markup?

li p {

}

LI is the parent element, P is the child, or descendant.