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 CSS Foundations Selectors Using Combinators in Selectors

major bummber

In the video, the teacher showed us how to chose a child of main by using:

.main > a {
    color: violet;
}

I should be able to do the same thing here by using:

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

but it doesn't seem to be working. What's going on?

5 Answers

You have a "." before the word DIV, this will cause it to look for an element with the CLASS of DIV rather than an actual DIV element.

So to fix your issue remove the "." (DOT)

Haha I can't believe I didn't notice that. for some reason I assumed the name of the class was div.

James Barnett
James Barnett
39,199 Points

Div is an HTML element, HTML elements are referenced in CSS by their tag name in the case of a <div> element it would be referenced by div.

On the other hand if you want to reference a <div class="main"> you need to reference it via it's class, which requires a dot before the class name.

further reading

Edit: I made a rookie mistake, didn't notice the class selector.

Remember these

    .header { // style here } // The DOT targets CLASSES of the name following it in this case CLASS of HEADER.
    #header { // Style here } // The HASH(Pound) target ID's of the name following it in this case ID of HEADER
    header { // Style here } // This will target the element with the name HEADER or in html would look like this <header>   </header>

Thanks, guys! I removed the period, and it worked right.

Cool! Choose a best answer to show others it is solved :)