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 trial

CSS

brandonlind2
brandonlind2
7,823 Points
Posted by brandonlind2
brandonlind2
7,823 Points

Can someone explain this CSS syntax?

I'm seeing alot of this syntax in examples of how to create drop down menus, but I dont understand it. Its using the same syntax as when using descending selectors, it looks to me like its saying if the mouse hovers over the element with a class of main-nav then apply the properties and values to the element with the class dropdown-menu? Am I reading this correctly, is this css's way of making sort of an if statement? If so since its the same syntax as descending selectors is this read differently when using classes or when there is two elements and one has a pseudo element?

.main-nav:hover .dropdown-menu{
        display: block;

}

1 Answer

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

:white_check_mark: You're right, this is a descendant selector. It's selecting elements with class dropdown-menu that are descendants of elements having class main-nav that are currently being hovered over with the mouse.

It doesn't matter that classes are involved. For example, you could have a similar selector using tags, such as this:

div:hover span { /* ... */ }
brandonlind2
brandonlind2
7,823 Points
brandonlind2
brandonlind2
7,823 Points

OK that makes sense thanks!