Home Ask Login Register

Developers Planet

Your answer is one click away!

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?



@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>


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


Leave an answer

Quote of the day: live life