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 CSS Selectors Advanced Selectors :nth-child

Ivana Lescesen
Ivana Lescesen
19,442 Points
Posted by Ivana Lescesen
Ivana Lescesen
19,442 Points

Is it better to use classes or descendant selectors

Is it better to use classes or descendant selectors?

3 Answers

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

A descendant selector has two items separated by a space. The CSS targets the one on the right, but only if it has an ancestor (is inside of) the item on the left. There can be any number of other nested elements in between.

A child selector has two items separated by a ">" character. The CSS also targets the one on the right, but only if it has the one on the left as the immediate parent. In this case, there can be no other nested elements in between.

The child selector is more efficient since the browser needs to check only one level of ancestry.

Excamples:

example.css 
div li { /* this is a descendant selector */ }
ul > li { /* this is a child selector */}
example.html 
<div>
  <section>
    <h3>Some header</h3>
    <ul>
      <li>Both sample selectors target this element</li>
    </ul>
  <section>
<div>
Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

I would say it depends on what you are doing, but here is a great article on writing efficient CSS

writing efficient CSS

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

:point_right: It depends on the situation.

First, remember that classes will need to be defined in the HTML. If there are many instances of the target elements, that might require a lot of changes. Descendant selectors might be a good choice in that case. But be aware of the performance concerns mentioned in the article Jacob linked to, and consider more efficient alternatives such as child selectors.

But if there are only a few target elements, and/or the target elements have similar ancestry to other elements that should not be targeted, classes are the way to go.

In the case of a "toss-up" you might consider which will make the code easier to read and maintain.

About that MDN article, I'm not sure I agree with it completely, particularly regarding the use of tag names with class rules. I find it handy to use, easy to maintain, and I know some of the Treehouse courses use it in the examples and exercises.

Jacob Mishkin
Jacob Mishkin
23,117 Points

In the end I think we both make the point of it depends on the situation, and what makes clean readable, and maintainable code. the MDN article I think is a good place to start, when asking questions like this, but also as the article points out that it was written in 2000. A lot has changed since then. Personally I'm a fan of classes and need be child selectors.

Ivana Lescesen
Ivana Lescesen
19,442 Points
Ivana Lescesen
Ivana Lescesen
19,442 Points

Thank you :) What is the difference between child and descendant selectors Jacob Mishkin Steven Parker