Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Properties places in CSS.

Hello everyone, In this video we made a descendant selector

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}

Can we just put "p" right after "#gallery" without "li" and "a"?

3 Answers

Hi Mohanned,

It would be ok to use #gallery p given this particular markup. That will select the exact same elements as #gallery li a p since the only paragraphs inside #gallery are the image captions.

To add to this, it's not strictly necessary to list out every single descendant element on the way to the element you're trying to target.

Not sure if this specifically was what you were wondering about when asking this question.

That depends on your goal. This particular bit of CSS is targeting image captions. If you add p right after gallery then all the paragraph tags in the html will become stylized by this rule. If you add text later that is not an image caption, you probably won't want this rule applied to it. Furthermore, in the future, it can become difficult to find the rule causing the p tags to be stylized when you do this so broadly.

Hi Ryan,

It would only target all paragraphs within #gallery. Not all paragraphs in the html.

Thanks for your help Jason!

You're welcome!