CSS Selectors: Show it if you know it

Hey quick question. Just wondering why the links I have put in the body;2 of them show up purple and one shows up blue. Why is this?

Hey,

By default once you click on a link it turns purple… So that means you visited 2 of 3 links

That’s what I thought but it’s staying blue even after opening. Ahwell. Thanks anyway.

Odd… You want to show me your HTML and CSS so I can have a look

HTML:

	<body>
	<a>
	<div>
		<a href="https://www.facebook.com">Facebook</a>
		</div>
	<div>
	    <a href="https://www.bravesons.bandcamp.com">Brave Sons Music</a>
	    </div>
	<div>
	    <a href="https://www.reddit.com">Reddit</a>
	    </div>
		</a>
		
	</body>

CSS:

a:hover {
text-decoration:none;
}

a:first-child {
color:#cdbe70;
}

a:nth-child(3) {
color:#ffc125

The first link won’t change color either.

Please paste in your code using this format

```

   replace this line with your code 

```
```
<body>
<a>
<div>
	<a href="https://www.facebook.com">Facebook</a>
	</div>
<div>
    <a href="https://www.bravesons.bandcamp.com">Brave Sons Music</a>
    </div>
<div>
    <a href="https://www.reddit.com">Reddit</a>
    </div>
	</a>
	```

You need to change it to: li:first-child a { }

first off, what is <a> doing here:

<body>
<a><--
<div>

I suggest to remove it. Now, i guess you already passed the exercise? The only problem is that all anchor elements (<a></a>) are first child of div. Now, we are going outside of the scope of the exercise. Happily, div are first, second and third child of body:

<body>
  <div></div><!-- first-child -->
  <div></div><!-- nth-child(2) -->
  <div></div><!-- last-child or nth-child(3) -->
</body>

Now, we could use this to our advantage:

a:hover
div:first-child {}
div:nth-child(3){}

now, tiny bit of a problems, anchors won’t inherit from there div parent. But what if we use the div for the count, and then say target the anchor inside, we can just chain it:

a:hover
div:first-child a {}
div:nth-child(3) a{}

The exercise sort assumes you nest your anchors inside your body directly, without any paragraphs, lists or divs

1 Like