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

Posted by Scott Darvill
Scott Darvill
5,227 Points

Does order matter with CSS class selectors ?

I am working through the Style the Image Captions video, and there is a part where we use the flowing code to change the font size and color of our link elements and paragraphs. 

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

The code has the desired effect, however if I change only the first line to

#gallery li p a {

It breaks, and has no effect on the page, yet all I did was switch the order of the elements.

Whats going on here ?

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

When you try #gallery li p a {, it means you try to apply style to a tag that in p tag. After they look through your html code, they can't find any of that, so there won't be any effect.

1 Answer

Sreng Hong
Sreng Hong
15,083 Points
Sreng Hong
Sreng Hong
15,083 Points

Of course, the order is very important.

When you say gallery li a p, it means that p is a child of a.

By the way,

When you say gallery li p a, it means that a is a child of p.