How to apply styles like hover, selected to this side nav menu

Question

I have side nav menu but when i apply styles its disturbing other ul and li elements on page, I want to apply hover and selected styles to this nav, can you please share some sample how can do that for just this specific menu

   <div class="col-xs-4 col-md-4 col-lg-4 navleftnavigator" >
       <!-- Sidebar -->
       <nav class="navbar navbar-center" id="sidebar-wrapper" role="navigation" style="border: 1px solid #862828">
           <ul class="nav sidebar-nav ">
               <li>
                   <a href="#">Home</a>
               </li>
               <li>
                   <a href="#">About</a>
               </li>
               <li>
                   <a href="#">Events</a>
               </li>
               <li>
                   <a href="#">Team</a>
               </li>
               <li>
                   <a href="#">Services</a>
               </li>
               <li>
                   <a href="#">Contact</a>
               </li>
               <li>
                   <a href="https://twitter.com/maridlcrmn">Follow me</a>
               </li>
           </ul>
       </nav>
       <!-- /#sidebar-wrapper -->
    </div>

To target CSS only to this particular nav, you could have all selectors prefixed with the `id` like so: `#sidebar-wrapper li:hover { ...`. That assumes that the `id` is unique on the page (which it should be, as that is a rule for `id`s.) — Alexander Nied, Nov 21 '18 at 15:43

rubentd · Accepted Answer · 2018-11-21T16:23:03.623

0

Add a unique className or even an id to your nav element

And then use a unique css selector.

something like:

nav.crazy-class-name-without-duplicates {
  border: 1px solid red;
}

nav.crazy-class-name-without-duplicates > ul > li {
  border: 1px solid tomato;
}

nav.crazy-class-name-without-duplicates > ul > li > a {
  color: navy;
}


nav.crazy-class-name-without-duplicates > ul > li:hover {
  /* li mouseover */
  background-color: red;
}

a::selection {
  /* a selection */
  background-color: yellow;
}

<div class="col-xs-4 col-md-4 col-lg-4 navleftnavigator" >
       <!-- Sidebar -->
       <nav class="navbar navbar-center crazy-class-name-without-duplicates" id="sidebar-wrapper" role="navigation" style="border: 1px solid #862828">
           <ul class="nav sidebar-nav ">
               <li>
                   <a href="#">Home</a>
               </li>
               <li>
                   <a href="#">About</a>
               </li>
               <li>
                   <a href="#">Events</a>
               </li>
               <li>
                   <a href="#">Team</a>
               </li>
               <li>
                   <a href="#">Services</a>
               </li>
               <li>
                   <a href="#">Contact</a>
               </li>
               <li>
                   <a href="https://twitter.com/maridlcrmn">Follow me</a>
               </li>
           </ul>
       </nav>
       <!-- /#sidebar-wrapper -->
    </div>

edited Nov 21 '18 at 16:23

answered Nov 21 '18 at 15:43

rubentd

1,245
11
25

This works fine but how to add hover and selected colors? – sgl Nov 21 '18 at 16:05
done, check out the edited answer, basically use :hover and ::selection – rubentd Nov 21 '18 at 16:13
oh, selection is meant to be used at the top level, sorry about that, I just edited my answer again – rubentd Nov 21 '18 at 16:21
works for me, run the snippet and try selecting the code. – rubentd Nov 21 '18 at 16:23
or you mean visited links? – rubentd Nov 21 '18 at 16:23
i want to show different color when user is click on that menu item . – sgl Nov 21 '18 at 16:24
you'll need javascript for that, this can help: https://stackoverflow.com/a/51557550/3424011 – rubentd Nov 21 '18 at 16:28
Thank you @rubentd – sgl Nov 21 '18 at 16:53

How to apply styles like hover, selected to this side nav menu

1 Answers1