CSS .active controls step on each other

[Ron Brinkman]

I am using TreeView CSS from https://www.w3schools.com/howto/howto_js_treeview.asp and Accordion CSS from https://www.w3schools.com/howto/howto_js_accordion.asp on the same web page.

The problem, both CSS snippets contain an ".active" control, resulting in them "stepping" on each other.  There must be a way to have the TreeView .active control invoked only when utilized by TreView, and the Accordion .active control invoked only when utilized by Accordion.

My knowledge of CSS command structure is weak, so please forgive me if this is a dumb questin.

[Ingolme]

If you give a unique class attribute to each of your HTML structures, you can use that to distinguish them in your CSS.

The tree view HTML could be like this:

<ul id="myUL" class="treeview">
  ...
  ...

The accordion menu already has a class "accordion" so we won't need to update its HTML.

Now we can update the CSS with some selectors which are specific to each HTML structure.

/* Tree view */
/*
  There's a space between ".treeview" and ".active" because ".active" is a descendant of ".treeview"
*/
.treeview .active {
  display: block;
}

/* Accordion */
/*
  There's no space between ".accordion" and ".active" because both classes belong to the same element
*/
.accordion.active, .accordion:hover {
  background-color: #ccc;
}

 

[Ron Brinkman]

Worked perfect.  Thanks!