Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Salihu Goni
Salihu Goni
3,703 Points

what is the difference between going from "gallery li a p{}" and "gallery p{}" in the css


2 Answers

The difference is linked to specificity. The CSS interpreter reads your cascading style sheet from the end of your selector to the front. In this example, it firsts looks for all the p tags, then all the p tags that are in a "gallery" (I assume class or id) tag, thus targeting all the paragraphs that are in the gallery tag. Whereas in the "gallery li a p{}" example, it is a more specific path and the interpreter will look for the paragraph tag that is in an anchor tag, in a list item tag, in the gallery tag.

Best coding practice: it is recommended to use classes when working with CSS, because it is more specific and the styling that you apply will impact only the element that has the one class you chose, thus giving you more control over your styling.

Declaring classes: in your HTML structure, let's say for a paragraph, you declare a class as follows: <p class="my_paragraph">Lorem Ipsum</p>.

Same goes for id's, though id's are more specific and should be used carefully as they should be unique.

"gallery li a p{}" will only effect "p" inside "a" inside "li" inside "gallery"


"gallery p{}" will effect all "p" inside "gallery" regardless of whether or not it is in "a"

for example

"gallery li a p{}" will effect only Paragraph1 while "gallery p{}" will effect both.

        <p> Paragraph1 </p>

    <p> Paragraph2 </p>