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!

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 trial

CSS CSS Foundations Selectors Using Combinators in Selectors

CSS Child Selectors. I don't understand...

Coding Challenge task 1

"Create a child selector to target the anchor element that is a direct child of the div" Set its font color to green and font weight to bold.

Bummer! The child combinator is >, make sure the color is set to 'green'.

Here is my code:

.h2 .p > a { color: green; font-weight: bold; }

I don't understand what I'm doing wrong. I've watched the video that goes with this coding challenge nearly 10 times and I still don't understand it....ANY HELP would be GREATLY appreciated!

5 Answers

have you tried: div > a

Remove the .'s like so:

h2 p > a

a period in the selector tells css that you are looking for an element with a class.

Haha! Alfonso Yes I tried using div > a but I realized what I was doing wrong. I accidentally put a period in front of the div so it messed up my whole code! Thank you for the help! I think I understand it now! :)

I'm glad it helped !

Hey Steven,

You're being asked to target the <a> tags that are children of a <div>. Another way to think about that is to see where <a> tags are contained within the <div>.

The selector you wrote targets any <a>'s that are direct children of .p, which is, in turn, nested within .h2. It's important to note here that when writing CSS selectors you do not put a period in front of the element. A period, in css, indicates a class-level selector.

In the example the h2's, p's and a's are all at the same level, within the containing element, in this case, the <div>. When elements are on the same level as each other, they don't have a parent/child relationship, instead they're referred to as "siblings".

In this case, what you want is div > a, which translates to give me all anchor tags which are the direct children of a div.

Your final code should look something like: ```div > a { color: green; font-weight: bold; }

Hope that makes sense!