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
Roald Larsen
7,421 PointsWhen to use class.element or element.class
Hi all,
I was doing some code challenges and saw the following:
.contact-info a{ display:block; }
ul.contact-info { font-size: 0.9em; margin:0 auto; padding:0; list-style:none; }
In some cases I use this order element followed by class -> element.class and in others I have to use this order class.element. Can someone explain me what the logic is behind it? Many thanks in advance.
3 Answers
James Barnett
39,199 PointsCheck out this blog post on that very topic
Michał Jarosz
2,037 PointsHello,
.contact-info a applies for all <a> elements inside elements with a class contact-info (can be anything with class contact-info, for example<div class="contact-info">, <ul class="contact-info">...
ul.contact-info applies for all <ul> elements with class contact-info so style will be applied only to such elements <ul class="contact-info">
Roald Larsen
7,421 PointsMany Thanks for the link James.
Especially the comments of the article make it clear what the difference is.
In resumé:
- element.class -> selects all direct children
- .class element -> all the descendants of .class with element (so deeper in the structured tree)
James Barnett
39,199 Points> element.class -> selects all direct children
That's incorrect, element.class any element with that class
element > class selects all direct children