JuliandotNut JuliandotNut - 6 months ago 27
CSS Question

Selecting <a> in 1st 2nd 3rd...nth <p> in HTML <body>

Here is my HTML code for body.



<body>
<!--Add your HTML below!-->
<p><a href="www.google.com">Google</a></p>
<p><a href="www.myspace.com">MySpace</a></p>
<p><a href="www.orkut.com">Orkut</a></p>
</body>





Now in CSS, I want to target links
<a>
inside of
<p>
. So what should I use to select
<a>
only in 1st
<p>
without ids, classes etc?

I have tried these but don't work.



p:first-of-type{
color:#CDBE70;
}

body:nth-child(3) a{
color:#FFC125;
}





What methods are available in CSS to do so?

Answer

You didn't target the a in the first selector and a tag do not inherit color. If you specify the anchor in the selector it will work.

body p:first-of-type a{
    color:#CDBE70;
}
body p:nth-of-type(2) a{
    color:#0DBE70;
}
body p:nth-of-type(3) a{
    color:#CDB070;
}
<body>
		<!--Add your HTML below!-->
		<p><a href="www.google.com">Google</a></p>
		<p><a href="www.myspace.com">MySpace</a></p>
		<p><a href="www.orkut.com">Orkut</a></p>
	</body>

Comments