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

Posted by Tomas Svojanovsky
Tomas Svojanovsky
26,680 Points

Browser css rule resolving

Hello, I wonder how browser resolve a css rule.

Example: .wrapper .container div button { background-color: red; }

Does it resolve from left or right? It looks for all buttons then divs and so on. What is the algorithm?

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi there.

This is a very interesting question. A selector in its most basic form, affects all elements of the same type; that is an element selector.

To change all elements in a single document you'd use the * which is known as the universal selector.

Instead of thinking of CSS "searching left and right".... think of it as "cascading" up and down a document. That's what the CSS Cascade is, a set of rules that govern how CSS selects elements to be changed. The way CSS looks at code is it sees one selector and style rule in a document and then looks further down the document for further code that might override it.

Here's a link you might want to look at regarding the cascading order. http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

The selector in your example is quite a specific one. In human terms you're trying to make CSS change a button element, that's inside a div element, that's inside another element (possibly a div, that has the class of container, that is inside another with the class of wrapper.

Specificity and cascading order are important concepts in CSS.

Hope this helps