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 Adding Pages to a Website Add and Style Icons

Roald Larsen
Roald Larsen
7,421 Points

When 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

Michał Jarosz
Michał Jarosz
2,037 Points

Hello,

.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
Roald Larsen
7,421 Points

Many 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
James Barnett
39,199 Points

Roald Larsen -

> element.class -> selects all direct children

That's incorrect, element.class any element with that class

element > class selects all direct children