complex .css : Specifically I just am confused with this, and need to apply display: none; to this entire Menu Section without defecting its function

Question

Confused about the hierarchy for applying .css when mixing .class and #id I would like the .css that will make this entire subsection of the menu display: none; EDIT : Yes, the first suggestion did remove the submenu, but also removed the other items, I should have posted the entire Menu first time. This spits out Menu where I do want some available and some not. Overview Yes Reerrals No Payments No Help No Logout Yes Marketing and its submenus - NO Profile and its submenus - Yes

<div class="uap-ap-menu">
<ul>
<li class="uap-ap-menu-tab-item `enter code here`"><a href="https://mywebsite/?uap_aff_subtab=overview"><i class="fa-uap fa-overview-account-uap"></i>Overview</a></li>
<li class="uap-ap-menu-tab-item "><a href="https://mywebsite/?uap_aff_subtab=referrals"><i class="fa-uap fa-referrals-account-uap"></i>Referrals</a></li>
<li class="uap-ap-menu-tab-item "><a href="https://mywebsite/?uap_aff_subtab=payments"><i class="fa-uap fa-payments-account-uap"></i>Payments</a></li>
<li class="uap-ap-menu-tab-item "><a href="https://mywebsite/?uap_aff_subtab=help"><i class="fa-uap fa-help-account-uap"></i>Help</a></li>
<li class="uap-ap-menu-tab-item "><a href="https://mywebsite/?uapaction=logout"><i class="fa-uap fa-logout-account-uap"></i>LogOut</a></li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item"  ><a href="javascript:void(0);"><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-profile"></i>Profile</a></div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_profile">
</ul>
</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item"  ><a href="javascript:void(0);"><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-marketing"></i>Marketing</a></div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_marketing">
</ul>
</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item"  ><a href="javascript:void(0);"><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-reports"></i>Overall</a></div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_reports">
</ul>
</li>
</ul>
</div>

`.uap-ap-submenu-item {display: none;}` should do the trick. — Praveen Kumar Purushothaman, Dec 19 '18 at 12:38
Yes, it di-d remove the submenu but also removed the other submenu items, I reposted the full menu, just wanted everything else display none, and still show the Profile submenu and its children, thanks for the quick reply — David N D Wilson, Dec 19 '18 at 13:11

score 0 · Answer 1 · answered Dec 19 '18 at 12:45

0

It's because in css rules any id value has much stronger effect than class, so selector with id ALWAYS override selector with class. Please, see this answer

answered Dec 19 '18 at 12:45

Valerii Voronkov

339
1
4
16

complex .css : Specifically I just am confused with this, and need to apply display: none; to this entire Menu Section without defecting its function

1 Answers1