23. Pseudo selectors


#1

Hi there, here is my code and it seems no to work. Do you guys have an idea of what is wrong? Thanks!

HTML


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<h3 class="fancy">1</h3>
		<p class="fancy">1</p>
		<p id="serious">2</p>
		<p id="serious">2</p>
		<p>3</p>
		
	</body>
</html>

CSS


/*Add your CSS below!*/
.fancy{
    
  font-family:cursive;
  color:violet;
}

#serious{

    font-family: Courier;
    color:#8C8C8C;
    
}

p :nth-child(3){
    
    font-size: 26px;
    
}

#2

there are two options, p:nth-child(4) or body :nth-child(4), either to select the 4th element, which is a paragraph or the 4th element inside body, notice the spacing around the colon in nth-child

You just need 3 paragraphs, nth-child counts all elements, so 1 heading and 3 paragraphs


#3

Hey @stetim94, Thanks a lot for the quick response. My bad, it was a false code but whith the p:nth-child(3) and after the 4th paragraph removed, it's seems not to work. Do you have an idea of what is wrong? Thanks!

HTML :








1


1


2


3

</body>

CSS :

.fancy{

font-family:cursive;
color:violet;
}

serious{

font-family: Courier;
color:#8C8C8C;

}

p :nth-child(3){

font-size: 26px;

}


#4

did you read my answer? careful with the spaces around the colon in p:nth-child(4), also it should be 4, not 3. All elements are counted. so it is the 4th element.


#5

Ooops, my bad. Thanks a lot @stetim94, I think i didn't really understand how the nth-child was acting.


#6

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