Help me with CSS selectors, part 18


#1


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<p><a href="https://www.google.com"> hola1</a></p>
		<p><a href="https://www.sdggds.com">hola2 </a></p>
		<p><a href="https://www.nooo.com">hola3</a></p>
	</body>
</html>

In the CSS tab I have:

a:hover{text-decoration:none}
a:first-child{color:#cdbe70}
a:nth-child(3){color:#ffc125}

I understand that the error comes from that the <a> are the children of the <p>,so a:nth-child(3) would make the desired color in the third "a" inside a paragraph. But say that I want to keep the HTML code, with the paragraphs, how do I fix the CSS?


#2

well, the paragraphs are first, second and third element of body so you should simply do:

p:nth-child(3)

then select the anchor element inside the paragraph:

p:nth-child(3) a

so we use the paragraphs for the counting


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.