FAQ: Selectors - Descendant Combinator

This community-built FAQ covers the “Descendant Combinator” exercise from the lesson “Selectors”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Full-Stack Engineer
Front-End Engineer
Back-End Engineer

FAQs on the exercise Descendant Combinator

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

What is the difference between descendants and children in HTML?

In the following code,

<ul class='main-list'>  
<li> ... </li> 
 <li> ... </li>  
<li> ... </li>
</ul>

is li a child or descendant of ul?

2 Likes

The Child Combinator (>) only selects those HTML Elements that are direct children of a specified element.

While the Descendant Combinator selects all HTML Elements that are either children, grandchildren, great grandchildren and so on.

4 Likes

Thank you for that clarification, it is quite helpful.

Hello, guys! In this lesson for CSS I wonder what is the difference between selector orders (h2. destination VS .destination h5)? Why it works like this? What h5 is the descendant of?

3

Thanks for your help in advance!

4 Likes

It is important to note that the descendant combinator is different from the chaining elements.

For example, h2. a description would choose the h2 elements having a class of description.

.description h2 on the other and would choose the element has .description class and then style the h2 elements of the child of that element This helps in not having to add classes for every element.

So in your example, h5 is the descendant of the element containing a class of description.

6 Likes

Is it possible to specify more than one descendant?

For example, is it valid to have the following selector:

.heading h2 h3 {

}

to select for h3 elements that are the descendants of an h2 element that is the descendent of an element with .heading?

(Or, is it rather better to use a more specific selector, like id, to specify elements?)

Thanks

1 Like

Thank you for explaining. I was also wondering what the difference was between li.destination and .destination li. This lesson was a little confusing, to be honest.

I saw many times people using something like ul > li in the selector. Is it some kind of the descendant combinator? What does it mean and how do we use it?

You can find a quick reference of CSS selectors here: CSS Selectors Reference

For the > selector, have a look at CSS element>element Selector
(Pay particular attention to the remark: Elements that are not directly a child of the specified parent, are not selected). With that in mind, have a look at the “Try it Yourself” example in the linked webpage which shows that for the selector div > p, a direct child (paragraph) of a div will be selected, while another paragraph element which is nested deeper and is not direct child of a div will not be selected.

When you select .destination li, then only the li elements, i.e. the li elements or child elements of the element which is having the class .destination would be selected.

Here the child elements are selected and the specifity is changed since class have more specificty than element.

Where as when you choose li.destination then only the h1 elements which are having the .special class would be selected.

I read all the answers but I still don’t understand the difference between h2.destination and .description h5 :frowning:

1 Like

So the first one (h2.destination) is more clear right? It’s just targeting all of the h2’s that have the class destination. That one is pretty straight forward. Any h2’s with that class in the whole html doc will be edited. Those look like:

The difficulty is understanding why .description h5 is any different. So what this second one is doing is taking WHATEVER element in the html code that has the class of “description” and looking at the h5’s that are nested underneath that. So here are some pieces of html code that it would target:

EX 1:

EX2:

2 Likes

Why didn’t we just do div h5 {
color: blueviolet
}
instead?

I got my answer already. It’s to be as specific as possible.