Styling child element with multiple styles on child and parent

Question

I'm looking to style an element inside a div with multiple classes and this element also has multiple classes:

<div class="breadcrumbsHolder dark-mode" id="breadcrumbHolderID">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">Other</li>
    <li class="breadcrumb-item active" id="activeBreadcrumb">Active</li>
  </ol>
</div>

This doesn't seem to work on the "Active" text:

.breadcrumbsHolder.dark-mode {
  color: orange;
}
.breadcrumbsHolder.dark-mode > .breadcrumb-item.active {
  color: white;
}

Neither does this:

.breadcrumbsHolder.dark-mode {
  color: orange;
}
.breadcrumbsHolder.dark-mode > #activeBreadcrumb {
  color: white;
}

Nor:

.breadcrumbsHolder.dark-mode {
  color: orange;
}
#breadcrumbHolderID > #activeBreadcrumb {
  color: white;
}

What am I doing wrong?

One thing to note is that the .breadcrumbsHolder.dark-mode works and applies to the outer parent div

Answer 1

You cannot use the angle bracket > because this picks only the direct child of the element, which isn't the case here - the ol element would be the direct child.

Here are some compact selectors you could use:

#activeBreadcrumb
li.active
.breadcrumb-item.active

If you want to select the active item based on the outer element:

.breadcrumbsHolder.dark-mode .breadcrumb-item.active

Other ways, for the records:

.breadcrumbsHolder .active
.breadcrumbsHolder li.active
.breadcrumb .active
ol li.active
.breadcrumbsHolder > .breadcrumb > .active

Also see: How is the "greater than" or ">" character used in CSS?