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 CSS: Cascading Style Sheets What is CSS?

Tag choice, descendant selector ( nav a { ... })

[@10:30 ] Why was nav a { ... } chosen, and not a more detailed, specific choice to name the descendant selector, following a logical order, such as:

nav ul li a { ... }

I can understand the obvious efficiency, but why ?

Thanks !

4 Answers

Simon Woodard
Simon Woodard
6,545 Points

It will also mean that styling will be applied to multiple children because of the wider range, that may be advantages in having a more universal styling.

For instance you want to remove the underline from your links, then select all the a tags instead of each of them specifically!

Mark Josephsen
Mark Josephsen
8,803 Points

Programmer's choice I suppose. If you add more links, they're all affected by the CSS with the less specific selector. However, if you're too specific, it could be harder to figure out why your links outside of the un-ordered list aren't displayed correctly. Kinda depends on the project.

Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child.

Hi Daniel,

You want to keep your selectors as short as possible for efficiency and also readability.

In this case, there was only 4 elements involved but what if there was 10? You wouldn't want to have a really long descendant selector made up of 10 type selectors.

It's not necessary to list out every element along the way to the descendant element you're trying to select. Only be as specific as you need to be.

In this case, nav a is enough to select the links.