How to overwrite CSS descendants of the same id/class tree

Question

Pardon me if the question is very basic, but I am learning CSS through online tutorials and templates and I cannot solve this doubt.

I have some headers descendants of objects with the same id/class tree. I want to target specifically one of them to change his format. More concretely, my code is:

<aside id="id-one" class="js-classone">
    <div class="class-two js-classone">
        <ul class="class-three">
            <li>
                <div class="class-four"></div>
                <div class="class-five">
                <div class="class-six  js-classone">
                <div class="class-seven">
                    <h2 id="id-target">Targeted h2</h2>
                    <p class="class-eight">some text</p>    
                </div>
                </div>
                </div>
            </li>
        </ul>
    </div>
</aside>  

At other parts of the web (not the same file .html, a different one) the h2 are not targeted (hence, with no id), but they are under the same parent/tree of id and classes.

My template came with some style.css applying to this headers as

#id-one .class-two .class-six > .class-seven .class-eight {
  color: #fff;
}

If I now add to my style.css

#id-target {
  color: #000;
}

for some reason I don't understand the first CSS code overwrites the color of #id-target. Hence, my question:

#id-one .class-two .class-six>.class-seven .class-eight {
  color: #fff;
}

#id-target {
  color: #000;
}

<aside id="id-one" class="js-classone">
  <div class="class-two js-classone">
    <ul class="class-three">
      <li>
        <div class="class-four"></div>
        <div class="class-five">
          <div class="class-six  js-classone">
            <div class="class-seven">
              <h2 id="id-target">Targeted h2</h2>
              <p class="class-eight">some text</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</aside>

Question: Do you know why #id-target does not apply? What should someone change in order to format the targeted h2?

Thanks in advance and please correct whatever in this question which is not adequately asked.

Answer 1

Oh boy, a couple of issues.

1. Your p tag has no closing tag.
2. You have closed your h2 tag twice.
3. You have applied a color: white; to your p tag.
4. You are trying to apply color: #000; to your h2 tag.

In order for you to see the results properly

1. Nest your code properly.
2. Close any tags that you open.
3. Don't have overspecific selectors in CSS, i.e. #id-one .class-two .class-six > .class-seven .class-eight can be simply written as .class-eight (which is a paragraph).
4. Also as a good practice give your classes and IDs meaningful names for them to be descriptive of how you would like to use them.

Hope that helps.