CODEWITHSUNDEEP
htmlcss
Patrick
Patrick

Reputation: 820

hover over a:nth-child(5) and (7) to effect a:nth-child(8)

I'm not sure why im finding this soo difficult.. I'm trying to make it so when you hover over RBA and RDA it also underlines to word "atomizer" at the end.

Am I not targeting them correctly?

JSFIDDLE

HTML/CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700italic,700,500italic,400italic,300italic,300);
 #heroLinks-Wrap {
  width: 692px;
  height: 31px;
  position: absolute;
  margin: 20px 0px;
  font-family: 'Roboto', sans-serif;
  font-weight: 200;
  color: #7777ff;
  font-size: 26.5px;
  letter-spacing: .7200002px;
}
#heroLinks-Wrap a:nth-child(1n+1) {
  color: #4e4eff;
}
#heroLinks-Wrap a:nth-child(1n+1):hover {
  text-decoration: underline;
}
#heroLinks-Wrap a:nth-child(8):hover {
  text-decoration: none;
}
#heroLinks-Wrap a:nth-child(5):hover + #heroLinks-Wrap a:nth-child(8) {
  text-decoration: underline;
}
<div id="heroLinks-Wrap">
  <a>Mechanical Mods</a>  <span>•</span>  <a>Glass Caps</a>  <span>•</span>  <a>RBA</a>  <span>&#38;</span>  <a>RDA</a>  <a>Atomizers</a>
</div>

Upvotes: 1

Views: 97

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240898

The selector a:nth-child(5):hover + #heroLinks-Wrap a:nth-child(8), isn't selecting anything due to the fact that the element #heroLinks-Wrap is not an adjacent sibling with the anchor element.

In other words, when selecting adjacent sibling elements using +, the following selector doesn't start selecting from the root again (which means that you don't need to specify the parent element again).

Therefore you can omit #heroLinks-Wrap from the second part of the selector and then replace the adjacent sibling combinator, +, with the general sibling combinator, ~ (since the elements aren't always adjacent siblings):

Updated Example

#heroLinks-Wrap a:nth-child(5):hover ~ a:nth-child(8),
#heroLinks-Wrap a:nth-child(7):hover ~ a:nth-child(8) {
  text-decoration: underline;
}

It's also worth mentioning that the :nth-of-type() pseudo class may be a better fit since you are only targeting anchor elements:

Updated Example

#heroLinks-Wrap a:nth-of-type(3):hover ~ a:nth-of-type(5),
#heroLinks-Wrap a:nth-of-type(4):hover ~ a:nth-of-type(5) {
  text-decoration: underline;
}

Upvotes: 3

Related Questions