This exercise uses selectors that target elements which are direct children of parent elements. Can we similarly target more deeply nested elements?

Question

This exercise uses selectors that target elements which are direct children of parent elements. Can we similarly target more deeply nested elements?

Answer

Yes we can target deeply nested child elements. While we can target arbitrarily nested elements with the descendant selector, in practice we should aim to keep our selectors short. As a very general rule of thumb, if our descendant selectors start to become greater than 3 levels deep we may want to consider ways to more specifically target the element in question. For example, perhaps we can throw a class on the targeted element instead of using a deeply nested selector.

36 Likes

In CSS, Which time should we set “h2.destination” or “.description h5”
These cases make me confused.
2018-10-31_202357

40 Likes

h2.destination will only apply to headers that have the class .destination.

.description h5 will apply to any h5 headers that are within any element that has the class .description.

Hope this helps.

49 Likes

So

h2.destination {
...
}

is for

<h2 class="destination">...</h2>

where h2 and “destination” are both specified within the tag

.description h5 {
...
}

this first is for all tags with class="description" but only to the nested h5
(within that tag with description class)

for ex

<div class="description"> 
  <h5>blah blah blah</h5>
</div>
33 Likes

.description li{
color: teal;
}

List items are nested, so I believe this is how they wanted. Try it and it will change the color to teal; if you try .description h5, it will not change the color. Look at the example

If I understand correctly…

h2.destination

is for targeting “within the tag”, the same element. E.g. an element h2 with class=“destination”

.description h5 

is for targeting nested elements (elements within other elements). Like soohyeok said, if say a div with class description contains h5 elements listed, e.g. a list of headings, you select the nested headings in this way.

Most times I just comfort myself: “In the beginning, the fathers (of these languages and their brothers the browsers and other platforms waiting to work with the code) created all this jargon with their stated syntax, and we must dance their songs if we need their invention”.

9 Likes

would even

h5 .description

select the all the H5 nested under class=“description”
or is it not applicabel

 <div>
 <ul class="description">
 <li><h5>blah blah</h5></li>
 <li>blah blah blah</li>
 <li>blah blah blah</li>
 <li>blah blah blah</li>
 </ul>
 </div>

or h5 will only be selcted via

.description h5

thanks

2 Likes

The second example you gave is correct; .description h5 will be the one to select the h5 element in your example.

h5.description will not because it will be looking for a h5 element with a class of ‘description’, while your example has the h5 element nested within the ul element with class of ‘description’.

7 Likes

I’ve been coding since 82 and I’ve NEVER known the difference between these. This was one of the best things I’ve learned. Makes total sense, but I’ve never heard about it before.

7 Likes

as I write .description h5 only h5 heading “top atractions” is in color teal. How to make all listed elements inside of h5 in teal too?

2 Likes

In the exercise only the title “top attractions” has an h5 tag, so if you wanted to select the list, you’d have to use
.description li
instead of
.description h5
This way you’ll see the list elements turn to teal.

This exercise was confusing because the lesson talks about nested elements and gives the example of a list. So it wasn’t super obvious when it asks to change h5, but it is indeed nested inside

13 Likes

According to CSS specificity, is:
.destination h5 > h5.destination
or
h5.description > .destination h5?
Thanks in advance!

1 Like

Use the table to compute the specificity of a selector…

style     id     class     type

Given .destination h5, specificity is 1 in class column, 1 in type column, so, 0 0 1 1.

h5.destination also has one of each, so 0 0 1 1. That means they both have the same specificity. Their difference is in how they apply to child elements.

h5.destination

applies only to H5 with class attribute destination. H5 will not likely have any children apart from maybe SPAN.

.destination h5

applies to all H5 children of the parent element with class attribute destination

Even though their specificity is the same, the latter has much greater reach.

13 Likes

After reading all the replies I came to the following mind image. Please correct me if I am wrong. Its a mental picture that helped me make sense of it all.

Its code and its a machine reading it from top to bottom while executing it. So.

h2. destination - the machine looks for all h2 elements AND/with .class attached to it. For only those h2 matching the criteria will the style cursive be applied to.

.description h5 - the machine looks for all .class AND/with h5 in it. Only those .class h5 will the style color be applied to. So no other h5 in the entire HTML file nor all other text in the .description class will get the color teal applied to (unless otherwise specified as in a separate h5 tag in CSS)

8 Likes

So, here in that exercise, nested elements of li will be colored to teal only if we write in the CSS .description li {color="teal}, but if we write h5 li {}, will the nested elements under li be colored to teal? If not, what is the reason?

1 Like

So why this is ok:

.description h5 {

}

but not this:

h5.description li {

}

Was stuck on the 1st part of the exercise then gave up and went for the explanation and saw the above - what gives? It’s confusing you’re given an example with li then you’re to figure out to put h5 in its stead…

1 Like

Very well described example … Thanks!!

How about if we want just one item in the list styled? Is it best to give that one list item a unique id? Or is there a way to target that one item using nested selection?

We can give it an id, yes, but as you have asked, is there a way to target one item? Yes, there is. It’s called traversal.

Given a UL, we can build a collection of the children…

ul>li

and then select which child you want…

ul>li:first-child

ul>li:nth-child(n)    /* n is an integer from 1 to N */

ul>li:last-child

Pseudo-classes - CSS: Cascading Style Sheets | MDN

There are a lot of approaches besides this one. I am a big fan of traversal and sparse use of ID. There is no hard and fast rule, so play with traversal and learn something that few people take the time to study.

Study the pseudo-classes closely. Above we mention n is an integer 1..N, but it can also be an expression that resolves to an integer.

2n + 1

and so on.

1 Like

if I want to select li in this exercise how can I set my css selector? knowing that .description h5 li code is invalid