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

Salihu Goni
Salihu Goni
3,703 Points

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

nil

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"

while

"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.

<li>
    <a>
        <p> Paragraph1 </p>
    </a>

    <p> Paragraph2 </p>

</li>