Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialTabrez Ahmad
1,822 PointsStuck 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
Mike Healy
2,451 PointsIs 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.
Mike Healy
2,451 PointsAnd 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
39,199 PointsSelect 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.
Mike Healy
2,451 Pointsp em {color: red;} worked for me. Are you adding to the existing CSS? (As you do each step continue adding code)
Tabrez Ahmad
1,822 PointsHi 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
1,822 PointsWaaaaaaaaa!
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
1,822 PointsA ha! An important lesson indeed.
Thanks again :)