1

I am trying to figure out how to write a style for the following:

I only want to style a:hover and a:active for the anchor tags inside .menu, not .menu-switch. The below appears to be working, but is there anyway I can join them into one style?

/*Apply the following styles to anchor tags within any ul within #main-nav*/
#main-nav ul li
a:link,
a:hover,
a:active,
a:visited {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
    border-radius: 4px;
}
/*Apply the following styles to anchor tags within .menu only within #main-nav*/
#main-nav .menu a:active {
    background-color: #ccc;
}

#main-nav .menu a:hover {
    background-color: #ccc;
}
<div id="main-nav">
    <ul class="menu-switch">
        <li><a class="js-menu-toggle" href="#">OPEN ME</a></li>
    </ul>
    <ul class="menu">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
    </ul>
</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Blake Rivell
  • 13,105
  • 31
  • 115
  • 231

2 Answers2

0

Your code actually has one other problem: the first set of CSS rules are not being grouped correctly. You need to repeat the #main-nav ul li portion for every selector in the list; otherwise, the rules will apply to other links in the document, not just the ones in #main-nav ul li.

In the same vein, to group your last two rules you need to group their selectors in their entirety.

Also, in case you weren't aware of it, you probably want to follow the LoVe-HAte mnemonic in arranging your link pseudo-classes, unless you have a good reason to sort :visited after :hover and :active (I've also taken the time to arrange your last two selectors in the same order).

/*Apply the following styles to anchor tags within any ul within #main-nav*/
#main-nav ul li a:link,
#main-nav ul li a:visited,
#main-nav ul li a:hover,
#main-nav ul li a:active {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    display: block;
    border-radius: 4px;
}
/*Apply the following styles to anchor tags within .menu only within #main-nav*/
#main-nav .menu a:hover,
#main-nav .menu a:active {
    background-color: #ccc;
}
<div id="main-nav">
    <ul class="menu-switch">
        <li><a class="js-menu-toggle" href="#">OPEN ME</a></li>
    </ul>
    <ul class="menu">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
    </ul>
</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
-2

#main-nav ul li a:link,
#main-nav ul li a:hover,
#main-nav ul li a:active,
#main-nav ul li a:visited {
  color: #000;
  text-decoration: none;
  padding: 10px;
  display: block;
  border-radius: 4px;
  border: 1px solid orange;
}
    /*Apply the following styles to anchor tags within .menu only within #main-nav*/
#main-nav ul a:active {
  background-color: #ccc;
  color: #fff;
}

#main-nav ul a:hover {
  background-color: #ccc;
  color: #fff;
}
<div id="main-nav">
  <ul class="menu-switch">
    <li><a class="js-menu-toggle" href="#">OPEN ME</a></li>
  </ul>
  <ul class="menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>
</div>
Kakada NEANG
  • 451
  • 1
  • 6
  • 16