Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Tabrez Ahmad
Tabrez Ahmad
1,822 Points

Stuck on Challenge Task for Type, Class, and ID Selectors

Hi all,

Can't believe I'm stuck on this. It looks so simple but I just can't work out where I'm going wrong on this code challenge.

You are to "Select the em inside the paragraph using a descendant selector. Set its color to 'red'."

I've tried so many iterations I just can't work out what I've done wrong. They are below after my html file:

<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" href="cc1-main-styles.css" type="text/css" media="screen">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body class="main-body">
<h1><em>Hello</em> World!</h1>
<div>
<p>
<em>Lorem ipsum dolor</em> sit amet, consectetur adipiscing elit. Nunc pulvinar consequat tortor, nec venenatis erat elementum scelerisque. Curabitur sit amet risus nisi. Aenean aliquet euismod augue at viverra. Ut varius arcu in lorem iaculis ullamcorper. Integer eu rutrum quam.
</p>
</div>
</body>
</html>

Attempt 1

em {
color:red;    
}

Attempt 2

p em {
color: red;    
}

Attempt 3

p > em {
color: red;     
}

Attempt 4 .main-body p > em { color: red; }

These are only a few of the myriad attempts I made. Thanks in advance!

:)

7 Answers

Is that the exact code you have? after the h1 rule you've reopened another { instead of closing it.

The hint was that the syntax highlighting broke later on.

And the broader lesson is when you're debugging the problem might be around the specific code you think you're working on. i.e. you were so focused on the color: red part you didn't look at the other code.

This can happen with programming languages where for example an error message might report line 400 when you forgot to close a string at line 370.

James Barnett
James Barnett
39,199 Points

Tabrez Ahmad -

Select the em inside the paragraph using a descendant selector. Set its color to 'red'.

You might want to review the video, as you seemed a little confused on what exactly a descendant selector is, as I noticed attempts 1, 2, 4 didn't use one.

p em {color: red;} worked for me. Are you adding to the existing CSS? (As you do each step continue adding code)

Tabrez Ahmad
Tabrez Ahmad
1,822 Points

Hi Mike,

Bizarre!!!!!!!!!!!!!

I've just pasted your code you so kindly supplied, and it's still not working! Really not sure what's going on? This is all the CSS code for you:

.main-body {
background: lightblue;
}

h1 {
color:darkblue;
{

p em {color: red;}

Guil Hernandez seems like a nice chap, do you think he would mind if I tracked him down and made an international call from New Zealand to work out what's going on? (just kidding in case NSA are reading this!).

Tabrez Ahmad
Tabrez Ahmad
1,822 Points

Waaaaaaaaa!

Cannot believe I did that! That's such a common mistake I appear to be making lately! I've not even got fat digits so I don't know how I end up hitting that key.

Thanks very much! I'm sure all the exclamations marks show my appreciation.

:)

Tabrez Ahmad
Tabrez Ahmad
1,822 Points

A ha! An important lesson indeed.

Thanks again :)