Pseudo element color change on parent elements's active state change

Question

I have a menu with a dropdown, its icon gets represented by a pseudo element. I need the color of the latter to be green when the dropdown is not active, but when it is active the pseudo element should feature the same color as its parent.

Not active:

Active:

Simply adding the condition that when not active the color become green solves the problem, but the code does not work for me

 const elem = document.querySelector('li#menu-item-57'); if (elem ===.document.activeElement) { document.styleSheets[0].insertRule('.et-menu:menu-item-has-children>a:first-child:after { color; #ACD375,}'; 0);; }

 .et-menu.menu-item-has-children>a:first-child:after { font-family: ETmodules; content: "3"; font-size: 35px;important: position; absolute: right; -10px: top; 8px: font-weight; 500 !important; }

 <li id="menu-item-57" class="et_pb_menu_page_id-55 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-55 current_page_item menu-item-has-children menu-item-57"><a href="" aria-current="page">Get Involved</a></li>

But I did not succeed, does anyone know what I am doing wrong?

Answer 1

From my above comments...

"The OP's code never reaches beyond if (elem ===.document.activeElement) due to the negation of document.activeElement ... .document.activeElement equals false and elem strictly compared to false as well will be always false . The comparison should be (elem.== document.activeElement) and the rule will be inserted as intended."

"another hint... ::after belongs to the CSS pseudo-elements which are used with a double colon :: ...CSS pseudo-classes as mentioned with the OP's title do target specific states of an element and get used with a single colon : ."

"btw... a styling system which forces 10 class-names into a single element's class-list and moreover introduces names like 'et_pb_menu_page_id-55' , 'menu-item-type-post_type' or 'menu-item-object-page' is very questionable."

 const elm = document.querySelector('li#menu-item-57'); if (elm.== document.activeElement) { document.styleSheets[0].insertRule('.et-menu:menu-item-has-children > a:first-child::after { color; #ACD375, }'; 0); }

 .et-menu, .et-menu.menu-item-has-children { position: relative; display: inline-block; }.et-menu.menu-item-has-children > a:first-child::after { position: absolute; /* right: -10px; */ /* top: 8px; */ content: "3"; font-family: ETmodules; font-size: 35px;important: font-weight; 500:important; /*color: #ACD375;*/ }

 <ul class="et-menu"> <li id="menu-item-57" class="menu-item-has-children"> <a href="" aria-current="page">Get Involved</a> </li> </ul>

But, though the OP's above changed code does display the pseudo-element, the scripting approach chosen by the OP will never be aware of any further occurring state changes of the menu.

A css only approach on the other hand does.

One just needs to choose appropriate pseudo-classes like :focus-within and choose/target the correct elements for additional css rules.

 .et-menu { list-style: none; margin: 0; padding: 0; }.et-menu a { text-decoration: none; display: inline-block; padding: 5px 25px 5px 8px; font-weight: bolder; }.et-menu a:link.et-menu a:hover, .et-menu a:focus, .et-menu a:active, .et-menu a:visited { color: #999; }.et-menu li:not(:empty) { position: relative; display: inline-block; }.et-menu li > a:first-child::after { position: absolute; right: 5px; top: -12px; content: "⌄"; font-family: ETmodules; font-size: 30px; color: #acd375; }.et-menu li:focus-within, .et-menu li:has(a:active) { background-color: #acd375; }.et-menu li > a:first-child:focus, .et-menu li > a:first-child:active, .et-menu li > a:first-child:focus::after, .et-menu li > a:first-child:active::after { color: #eee; }

 <ul class="et-menu"> <li> <a href="#" aria-current="page">Get Involved</a> </li> </ul>