Nth-child wont show correct font size

HTML & CSS
1

I’m sure I’m just to close to the forest to see the trees here… I’m trying to learn the basics and have run into a block;

Heres the HTML side of the review I’m working on:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	<h3 class="fancy">
	<p class="fancy">
	line number one
	</p>
	<p id="serious">
	line number two
	</p>
	<p>
	line number three
	</p>
	</h3>
	
		
	</body>
</html>

All fine, but heres what I have for the CSS side;

/Add your CSS below!/
.fancy{
font-family: cursive; color: violet;
}
#serious {
font-family: Courier; color: #8c8c8c;
}
p :nth-child(4)
{
font-size: 26px;
}

For the life of me I cant see what I have wrong…I’ve edited everything I could think of and have checked other sites for info but I cant get the child to display a 26px font… Any Help?

2

Looks to be more than one problem

You have p tags inside an h3 Sure you want that?
There are not 4 p tags

3

Hello, Turtleman.

Two things to check out:
(1) there should be no space between “p” and “:nth-chld”.
(2) there is no 4th child, only 3.

Cheers

4

Thank You both for the replies… I’m a little confused now… Here’s the “Instructions” I’m working with;

Instructions

Add a third paragraph to the HTML document. On the CSS tab, use nth-child to give it a font size of 26px. Remember: your paragraph is the third paragraph, but the fourth CHILD of body. The h3 counts as the first child!

Hint

That means you’ll need to use nth-child(4) to select your paragraph on the CSS tab.

If you’re getting strange numbers for your font-size, type Ctrl-0 or Cmd-0 to reset your zoom!

Make sure to leave a space between body :nth-child. If you don’t have a space it means “find the body tag that is an nth-child”. If you have a space it means “find the nth-child of the body tag”.

BUT!!.. if I think I follow the instructions correctly I get the following error;

Oops, try again. Did you give your third paragraph a font-size of 26px? It looks like it’s currently undefined.

5

Sounds like the example HTML is different. In your mark-up the p tags’ parent is the h3 not body.

If you change to

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	<h3 class="fancy">Fancy</h3>
	<p class="fancy">
	line number one
	</p>
	<p id="serious">
	line number two
	</p>
	<p>
	line number three
	</p>
		
	</body>
</html>

or

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	<h3 class="fancy">
	<p class="fancy">
	line number one
	</p>
	<p id="serious">
	line number two
	</p>
	<p>
	line number three
	</p>
	<p>
	line number four
	</p>
        </h3>
	</body>
</html>

any better?

6

This is what the instructions are asking for:


<!DOCTYPE html>
<html>
<head>
<style>
.fancy{
    font-family: cursive;
    color: violet;
}
#serious {
    font-family: Courier;
    color: #8c8c8c;
}
p:nth-child(4) {
    font-size:26px;
}
</style>
</head>
<body>

<h3 class="fancy"></h3>
<p class="fancy">line number one</p>
<p id="serious">line number two</p>
<p>line number three</p>

</body>
</html>

This is what you have written:


<!DOCTYPE html>
<html>
<head>
<style>
.fancy{
    font-family: cursive;
    color: violet;
}
#serious {
    font-family: Courier;
    color: #8c8c8c;
}
p:nth-child(4) {
    font-size:26px;
}
</style>
</head>
<body>

<h3 class="fancy">
    <p class="fancy">line number one</p>
    <p id="serious">line number two</p>
    <p>line number three</p>
</h3>

</body>
</html>
7

Thank All of you!.. (I’ll get it figured out someday)… I dont quit so I’ll keep practicing…
Your both Correct
I changed to;

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	<h3 class="fancy"></h3>
	<p class="fancy">
	line number one
	</p>
	<p id="serious">
	line number two
	</p>
	<p>
	line number three
	</p>
	
	
		
	</body>
</html>

/*Add your CSS below!*/
.fancy{
    font-family: cursive; color: violet;
}
#serious{
    font-family: Courier; color: #8c8c8c;
}
p:nth-child(4){
    font-size: 26px;
}

On to lesson 24… :-\