Modify properties of an element but only when it's inside other in CSS

Question

I have a page structure which looks like:

<article><p>Title</p></article>

I'd like to modify the p only when it's inside the <article>. I tried

article > p {
  font: 15px;
}

And:

article p {
  font: 15px;
}

But neither of them work :( How shall I do it?

Answer 1

Your selectors are correct. The problem is that when you use the shorthand font property, the minimum you can specify is the font-size and font-family:

article p {
    font: 15px Arial;
}

Note that your second example uses the child selector, which I don't believe is supported in IE6, so I'd recommend using the first format.

Here's a working example of the above.