CSS selectors


#1

My name is Martin and new to Code.I have a problem with the code. Apparently I got it 'right' which is confusing me. I honestly think its not 'right''.The colour of the 3 links is the same! Below is the HTML and CSS:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<p><a href="http://www.liverpoolfc.com">Football</a></p>
		<p><a href="http://www.bbc.co.uk">News</a></p>
		<p><a href="www.mirror.co.uk">Red Top</a></lp>
	</body>
</html>

/*Add your CSS below!*/
a:hover{
text-decoration:none;
}
a:first-child{
color:#CDBE70;
}
a:nth-child(3){
color:#FFC125;
}


#2

Take a look at your html. You need only 3 "a" tags in your body like this:

<a href="#">Football</a>
<a href="#">News</a>
<a href="#">Red Top</a>

You can read here more about first-child selector to better understand it.


#3

Your html code explains the problem, all your links (<a></a>) are first child of paragraph. The lesson assumes you put the link directly in body:

<body>
  <a href="www.mirror.co.uk">Red Top</a>
  <a href="http://www.bbc.co.uk">News</a>
  <a href="http://www.liverpoolfc.com">Football</a>
</body>

does that mean we can't use the links in paragraph? of course not, we just need to tweak the code a bit, we are going outside the scope of the exercise. Now, your paragraphs are first, second and third child of body, so we could do:

a:hover{
    text-decoration:none;
    }
p:first-child{
    color:#CDBE70;
}
p:nth-child(3){
    color:#FFC125;
}

however, we want to color the links, so we can use nth-child to count the paragraphs, and then simply tell css we want the links inside the paragraphs:

a:hover{
    text-decoration:none;
    }
p:first-child a{
    color:#CDBE70;
}
p:nth-child(3 a){
    color:#FFC125;
}

Does that make sense?

for next time, use one of the two following options to make your code/indent visible (your html code was not visible):

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard

@julietaatanasova, i am personally not a huge fan of w3schools, some people here nail it why. It took w3schools ages to updated there php course with prepared statements. They do good as well, but if i have to choice, i prefer to use MDN, i thought i just give you heads up.


#4

Thanks for the responses. The support is appreciated.


#5

@mastersdog Could you please post a link to the exercise you're on? I think this is in the wrong category, but I'm not sure which would be the correct one to move it to :)


#6

It was CSS selectors. Think I posted it in the right area. I could be wrong, I am new to this.


#7

it is this exercise, it is not in the html + css category because the exercise sort assumes you nest the links directly in body, in which case a:first-child and a:nth-child(3) work fine