Portal_Zii Portal_Zii - 3 years ago 307
HTML Question

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>

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download