How to Highlight WordPress Menu Item?

Question

css

Good afternoon.

Specified the CSS class "custommycab" for the menu item.
In additional styles I wrote

.cuctommycab {
color:blue;
}

The result - of course, nothing works, the color has not changed.

Launched the inspector in the browser, here is the element code:

<div class="nav-wrap container"><ul id="menu-%d0%bc%d0%b5%d0%bd%d1%8e%d1%88%d0%b0%d0%bf%d0%ba%d0%b0" class="nav container-inner group"><li id="menu-item-344" class="custommycab menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-14 current_page_item menu-item-344"><a href="https://school-event.site/" aria-current="page"><span class="dojodigital_toggle_title">Главная страница</span></a></li>
<li id="menu-item-351" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-351"><a href="https://school-event.site/forum/">Форум</a></li>
<li id="menu-item-335" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-335"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/">Внеклассная работа</a>
<ul class="sub-menu" style="display: none;">
  <li id="menu-item-336" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-336"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d0%ba%d0%be%d0%bd%d0%ba%d1%83%d1%80%d1%81%d1%8b-%d0%b8-%d0%b8%d0%b3%d1%80%d1%8b%d1%80/">Конкурсы и игры</a></li>
  <li id="menu-item-337" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-337"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d1%88%d0%ba%d0%be%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5-%d0%bf%d1%80%d0%b0%d0%b7%d0%b4%d0%bd%d0%b8%d0%ba%d0%b8%d1%80/">Школьные праздники</a></li>
  <li id="menu-item-477" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-477"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d1%8b%d0%b5-%d0%bc%d0%b5%d1%80%d0%be%d0%bf%d1%80%d0%b8%d1%8f%d1%82%d0%b8%d1%8f/">Внеклассные мероприятия</a>
  <ul class="sub-menu" style="display: none;">
    <li id="menu-item-479" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-479"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d0%bc%d0%bb%d0%b0%d0%b4%d1%88%d0%b0%d1%8f-%d1%88%d0%ba%d0%be%d0%bb%d0%b0-1-4-%d0%ba%d0%bb%d0%b0%d1%81%d1%81/">Младшая школа (1-4 класс)</a></li>
    <li id="menu-item-480" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-480"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d1%81%d1%80%d0%b5%d0%b4%d0%bd%d1%8f%d1%8f-%d1%88%d0%ba%d0%be%d0%bb%d0%b0-5-9%d0%ba%d0%bb%d0%b0%d1%81%d1%81/">Средняя школа (5-9класс)</a></li>
    <li id="menu-item-481" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-481"><a href="https://school-event.site/category/%d0%b2%d0%bd%d0%b5%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%b0%d1%8f-%d1%80%d0%b0%d0%b1%d0%be%d1%82%d0%b0%d1%80/%d1%81%d1%82%d0%b0%d1%80%d1%88%d0%b0%d1%8f-%d1%88%d0%ba%d0%be%d0%bb%d0%b0-10-11-%d0%ba%d0%bb%d0%b0%d1%81%d1%81/">Старшая школа (10-11 класс)</a></li>
  </ul>
</li>
</ul>
</li>
<li id="menu-item-338" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-338"><a href="https://school-event.site/category/%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d0%b8%d1%82%d0%b5%d0%bb%d1%8e/">Классному руководителю</a>
<ul class="sub-menu" style="display: none;">
  <li id="menu-item-339" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-339"><a href="https://school-event.site/category/%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d1%83%d0%ba%d0%be%d0%b2%d0%be%d0%b4%d0%b8%d1%82%d0%b5%d0%bb%d1%8e/%d0%bf%d0%be%d0%bb%d0%b5%d0%b7%d0%bd%d0%b0%d1%8f-%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f%d1%80/">Полезная информация</a></li>
</ul>
</li>
<li id="menu-item-340" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-340"><a href="https://school-event.site/category/%d1%83%d1%87%d0%b8%d1%82%d0%b5%d0%bb%d1%8f%d0%bc%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b0/">Учителям</a>
<ul class="sub-menu" style="display: none;">
  <li id="menu-item-341" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-341"><a href="https://school-event.site/category/%d1%83%d1%87%d0%b8%d1%82%d0%b5%d0%bb%d1%8f%d0%bc%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b0/%d0%bc%d0%b5%d1%82%d0%be%d0%b4%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%80%d0%b5%d0%ba%d0%be%d0%bc%d0%b5%d0%bd%d0%b4%d0%b0%d1%86%d0%b8%d0%b8%d1%80/">Методические рекомендации</a></li>
  <li id="menu-item-342" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-342"><a href="https://school-event.site/category/%d1%83%d1%87%d0%b8%d1%82%d0%b5%d0%bb%d1%8f%d0%bc%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b0/%d0%be%d1%84%d0%be%d1%80%d0%bc%d0%bb%d0%b5%d0%bd%d0%b8%d0%b5-%d1%88%d0%ba%d0%be%d0%bb%d1%8b-%d1%80/">Оформление школы</a></li>
</ul>
</li>
<li id="menu-item-617" class="custommycab menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://school-event.site/account/">Мой кабинет</a></li>
</ul></div>				
                
                                  <div class="container">
                    <div class="container-inner">		
                      <div class="toggle-search"><i class="fas fa-search"></i></div>
                      <div class="search-expand">
                        <div class="search-expand-inner">
                          <form method="get" class="searchform themeform" action="https://school-event.site/">
  <div>
    <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите запрос и нажмите Enter';" onfocus="if(this.value=='Введите запрос и нажмите Enter')this.value='';" value="Введите запрос и нажмите Enter">
  </div>
</form>												</div>
                      </div>
                    </div><!--/.container-inner-->
                  </div><!--/.container-->

I don’t understand much, but I try, yesterday I sat until 3 o’clock in the morning - nothing worked. Only the menu item "menu-item-617" needs to be changed.
Help me please.

Answer 1

Hey!
Alternatively:
.coctommycab {
color: blue !important;
}
Business in a heritability and weight of styles. The author's styles take precedence over yours (most likely this is the problem).
You can also refer to an element through its id
#menu-item- 617 {
color: blue;
}

Answer 2

I don’t understand much, but I try, yesterday I sat until 3 o’clock in the morning - nothing worked. Only the menu item "menu-item-617" needs to be changed.

What's the problem with writing the same for your menu-item-617? As I understand it, you just want to highlight a separate menu item that is not active, so feel free to write styles for a specific element by referring to the class, or you can reach the element through nth-child

Answer 3

You have at least an error in writing classes, in the layout of custommycab,
but you describe cuctommycab.
Specify one class and use important if WP overrides your style

.custommycab{
color: blue !important;
}