Learn Css- lesson 13 - Nested Elements....need clarification


#1

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-css-selectors-visual-rules/lessons/css-setup-selectors/exercises/nested-elements?action=lesson_resume&course_redirect=learn-css

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

```

From doing the exercise, i found that the answer was:

.description h5{
color:teal;
}

but i dont understand why i cant use:

h5.description{
color:teal;
}

.For the h5.description, i figured that it was because i didnt make the class=“description”. so i added it in to the html and it worked but only for one of them. (had to add the class into the other two h5 headings below in order to make all three h5 headings teal).

 <h5 class="description">Top Attractions</h5>
    <ul>
      <li>Museums</li>
      <li>Bike Tours</li>
      <li>Historical Monuments</li>
    </ul>
  </div>

I figured that was it but when i tried

.description{
color:teal;
}

it made the whole paragraph, list header and list teal. This is what confused me because this would mean that all of this is in the “description” class right? So it takes me back to why couldnt i use

h5.description{
color:teal;
}

if the header was already in the description class?

sorry if this is confusing i dont really know how to explain it better

<do not remove the three backticks above>

#2

but the description class exist but its on the div:

<div class="description">

that is why we have to use .description h5, we want to target the h5 element inside the element with class description.

h5.description would target all h5 elements with class description, but this is not what we want.


#4

I have more of a question. In the example it says to use:
.main-list li {

}

as a selector for li elements.

But why cannot we use li.main-list like we did in the previous exercise #12 Chaining Selectors?


#5

Sorry I think I understand now why it was used like this. If we were to use li.main-list, this would apply the rule of this selector to all li elements on the page.

But if we use .main-list li we can then apply this class only to some specific lists. I.e. if on our page we would have several lists and wanted to have different styles for them, we could create another class, i.e.

.secondary-list li and apply it to some other lists we wanted. Did I get it right? :slight_smile:


#6

li.main_list would apply to any list which has class main_list, so for example:

<style> li.main-list { color: red } </style>
<!-- only list elements with class main-list are affected -->
<div class="main-list">i am not affected, i am not a list element</div>
<ul>
    <li class="main-list">i am affected</li>
    <li>i am not</li>
</ul>

well, all li elements within an element having class main-list would be affected:

// css code
.main-list li { color: red }

<!-- html code -->
<div class="main-list">
    <ul>
         <li>i am affected</li>
    </ul>
    <ol>
         <li>i am also affected</li>
    </ol>
</div>
<ul><li>i am not affected, i am outside the elements with class main-list</li></ul>

#7
  1. Would i be able to use “li.main-list” to target the first two li in your second example? because using “element.class” should target any element with that specific class right? and in this case the first li is inside the ul element which has a class of mainlist and the other li is inside the ol element which has a class of mainlist.

Or is that a no because “element.class” only targets specifically 1 line of code that has both the element and class written into it specifically like

  • li.red targets this

  • #8

    yes, this is possible.


    #9

    A post was split to a new topic: Learn-css-lesson-13-neste elements


    #10

    This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.