How Do CSS Selectors Determine Precedence?

CSS Selector Priority

When styling an HTML element with CSS, multiple selectors may be applicable. In such scenarios, the browser follows specific rules to determine which selector holds precedence. This article explores the priorities among CSS selectors.

Specificity

The specificity of a selector determines its precedence over others. Specificity is calculated based on the following criteria:

• Inline Style Rules (highest): Styles defined within the HTML element's style attribute.
• ID Selector (high): Selects an element by its unique ID.
• Class Selector (medium): Selects elements with a specific class.
• Element Selector (low): Selects elements by their HTML tag name.

Specificity Calculation

Specificity is calculated by assigning numerical values as follows:

• Inline Style Rule: 1000
• ID Selector: 100
• Class Selector: 10
• Element Selector: 1

By adding the values for each relevant criterion, the specificity is determined.

Precedence

Based on specificity, the following precedence rules apply:

• !important Rules and Inline Style Rules: These selectors have the highest precedence.
• Specificity: If two selectors have different specificities, the rule with the higher specificity wins. For example, an ID selector (#id) has a higher precedence than a class selector (.classname).
• Declaration Order: If multiple selectors have the same specificity, the rule declared later in the CSS file takes precedence.

Example

Consider the following CSS rules:

<code class="css">p {
  color: red;
}

#content p {
  color: blue;
}</code>

In this example, the #content p selector has a higher specificity than the p selector because it includes an ID selector. Therefore, for any elements within the #content element, the color property will be set to blue, overriding the default red color.

Understanding the priorities among CSS selectors is crucial when creating or debugging complex CSS code. By adhering to these rules, you can ensure that the desired styles are applied to the appropriate elements.

The above is the detailed content of How Do CSS Selectors Determine Precedence?. For more information, please follow other related articles on the PHP Chinese website!