FAQ: Selectors - Descendant Combinator

[discourse-admin]

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 () 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 () below!
You can also find further discussion and get answers to your questions over in Language Help.

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

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

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 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!

[thelaughingseal]

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?

[vadimvool0999999165]

@thelaughingseal

child or descendant

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.

[thelaughingseal]

Thank you for that clarification, it is quite helpful.

[anastamia]

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?

Thanks for your help in advance!

[gouravgv1]

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.

[method8782690259]

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

[amieromano9550861767]

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.

[javawhiz72798]

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?

[mtrtmk]

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.

[gouravgv1]

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.

[melisaalexander]

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

[jessicadowning631553]

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:

[johndus3531752146]

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

[johndus3531752146]

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

[wileysoutheastasia]

In your directions I often notice that an h5 with left and right arrows refers to html and h5 with no arrows refers to css. Is this correct? Left and right arrows html? No left and right arrows css? is this a standard or just sometimes? I just now noticed that I can not type in a left arrow or a right arrow in this dialog box.

[ducksocks]

not sure what the point of this exercise is since

.description h5 {}
and h5 {}

return the same thing in the documents current form. i feel like this is a confusing lesson since the student has to do extra work to get the same outcome

[sick_icarus]

Is it possible to select the descendants of an element without that element having a class? Like, for instance, if div did not have the class of description?

EDIT:
I found out! You do just this in the next exercise, without much explanation. I learned from the next lessions forms that the way you do this is by listing the descendant elements you want to target after the element they are nested in. So, for my question, it would be div h5 in CSS with just the space and then the curly braces.

[chip7824541897]

but the description in html code is not inside the h5 tag how we could us it in css as h5 class???

[r3ubic]

It seems to me that these two code, do the exact same thing, perhaps I misheard but now im a little confused, clarification would be appreciated, thank you!

The two code in question:

h5.destination {}

.description h5 {}

Its kinda like multiplying in math where it doesn’t matter which order the numbers are in, it will still produce the same result: 4x5=20 — 5x4=20