Styling <img> in <figure>

Question

I can't seem to style an image that is within an figure:

HTML:

<article>
    <p>

    <figure class="float-right">
        <img src="images/castle1.jpg">
        <figcaption>The castle by day</figcaption>
    </figure> 

    </p>
</article>

CSS:

article p figure img {
    height: 330px;
    width: 500px;
    float: right;
    margin: 10px 20px 20px 20px;
    background-color: green;
    border-radius: 4px;
}

You can view the site here

Answer 1

p cannot contain a figure. The only content that's allowed in a p element is phrasing content, which figure doesn't classify as.

What's actually happening is that your figure element is being created as a sibling following your p element, and silently closing your opening <p> tag (leaving the closing tag hanging... sort of). Since your selector looks for an img within a figure that's itself within a p, but the actual DOM does not reflect this, it won't work.

If you're not using the p element for anything else, it should be removed, and your selector changed to:

article figure img {
    height: 330px;
    width: 500px;
    float: right;
    margin: 10px 20px 20px 20px;
    background-color: green;
    border-radius: 4px;
}