Explain how a browser determines which elements CSS styles apply to.

The browser parses the HTML tree and CSS rules, then constructs the render tree, which links DOM elements with their corresponding CSS styles.

The style determination process includes several steps:

1. Parsing HTML and CSS: The browser parses the HTML document, creating a DOM tree. Simultaneously, CSS styles are parsed (from <style> tags, <link> tags, or inline styles), creating a CSSOM tree (CSS Object Model).

2. Matching selectors: The browser traverses the DOM tree, and for each node in the DOM, it searches for matching rules in the CSSOM. The matching is done from right to left. For example, for the selector .parent .child, the browser first looks for elements with the class child, then checks if they have a parent with the class parent. This approach allows quickly discarding large subtrees that do not match the selector.

3. Cascading: When multiple rules are found for the same element, the browser applies the cascade rules. Cascading determines the order of style application based on:

   • The source of styles (author styles, user styles, browser styles).
   • The specificity of selectors.
   • The order of rules.
   • The use of !important.

   Example of specificity:

   Selector type	Points
   Inline styles	1000
   ID selectors	100
   Classes, attributes	10
   Tags, pseudo-elements	1
   Universal (*)	0

   More specific selectors have higher priority.

4. Inheritance: Some CSS properties are inherited from parent elements to child elements (e.g., font-size, color). The browser considers this when applying styles.

5. Building the render tree: Based on the DOM tree and applied CSS styles, the render tree (or layout tree) is constructed. It contains only visible elements and their styles necessary for layout and rendering.

   // Example: an element with multiple CSS rules
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Specificity: 1 */
     color: blue;
   }
   
   .text {  /* Specificity: 10 */
     color: red; /* This color will be applied as it is more specific */
     font-size: 16px;
   }
   
   p.text { /* Specificity: 11 */
      font-weight: bold; /* This property will be applied */
   }
   
   /* Order also matters for selectors with the same specificity */
   div { color: green; }
   div { color: yellow; } /* Yellow will be applied */
   

Thus, the browser goes through parsing, matching, cascading, and inheritance steps to determine the final set of styles for each element before constructing the render tree and rendering.