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

The browser determines which elements to apply CSS styles to using search and matching mechanisms based on CSS selectors.

The process occurs as follows:

1. Parsing CSS: The browser parses CSS files and <style> blocks in HTML, creating an internal representation of styles.
2. Parsing HTML: The browser parses HTML, creating the Document Object Model (DOM) Tree.
3. Matching: For each node in the DOM Tree, the browser attempts to match it with CSS rules. This is done by checking the selectors in the CSS rules. The browser typically works from more specific parts of the selector to less specific (right to left). For example, for the selector div article p, it first finds p, then checks if it is a descendant of article, which in turn is a descendant of div.
4. Applying: If a DOM node matches one or more CSS rules, the browser applies the corresponding styles to that node. In case of multiple applicable rules, the browser determines the final set of styles using specificity rules, order of declarations, and inheritance.

Specificity:

Specificity is an algorithm used by the browser to calculate the weight of a CSS selector. More specific selectors have higher priority when applying styles. Specificity is calculated based on the number of IDs, classes/pseudo-classes/attributes, and elements/pseudo-elements in the selector.

// Specificity calculation: (a, b, c)
// a = number of IDs
// b = number of classes, pseudo-classes, attributes
// c = number of elements, pseudo-elements
// Inline styles have the highest priority (1, 0, 0, 0)
// The `*` selector has specificity (0, 0, 0)

Example of specificity calculation:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Order of declarations:

If two rules have the same specificity, the one declared last in the CSS code is applied.

Inheritance:

Some CSS properties are inherited from parent elements to child elements (e.g., color, font-family). If a property does not have an explicit value on an element, the browser looks for an inherited value up the DOM tree.

Thus, the browser determines styles for an element by matching selectors, resolving conflicts using specificity and order of declarations, and considering inheritance.