"Explain how a browser determines what elements match a CSS selector"?

#1

Hey all,

Looking over the questions for the blog homework, I’m a bit lost with the last question:
" Explain how a browser determines what elements match a CSS selector."

Can anyone break down the explanation for this? Google has a lot of answers to this exact question, but I don’t quite follow and I don’t think we covered this in class yesterday.

Thanks!

#2

Hey! I think the question is asking specifically how a browser interprets style instructions. In a page of code, there may be conflicting or overlapping information relayed to the browser, and it has to decide how to style elements somehow.

I found this in the pre-work page for Day 1:
"When you style an element, you can use many different possible methods in order to achieve a desired result. Under the hood, CSS relies on a specific ’ order of inheritance ’ to determine which methods end up affecting how your element is rendered by prioritizing some methods over others . This complex interaction makes CSS powerful, but it can also make it confusing and difficult to debug.

There are three main sources of style information that form a cascade. In order of loading order (that is, which styling loads first), they are:

  1. The browser’s default styles for the markup language. (ex. Chrome or Firefox built-in defaults)
  2. Styles specified by a user who is reading the document. (ex. Maybe a user set some custom settings somewhere)
  3. The styles linked to the document by its author. (This is what we can control)"

Hope that helps!