Portal_Zii February 2016

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>

Answers


Josh Crozier February 2016

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;
}

Post Status

Asked in February 2016
Viewed 1,361 times
Voted 5
Answered 1 times

Search




Leave an answer