CSS style priority

In web development, CSS style priority is a very important concept. When multiple style rules apply to the same element simultaneously, specific rules must be followed to determine the final style behavior. This article details the rules for calculating CSS style precedence, hoping to help you better understand and apply CSS.

1. Priority Rules

When calculating CSS style priority, you can usually determine it based on the following principles:

Importance (!important): Styles declared with !important will be matched first.
Inline Styles: Styles defined directly within an HTML element using the style attribute.
ID Selector: Styles defined using an ID selector.
Class Selector: Styles defined using a class selector.
Tag Selector: Styles defined using a tag selector.
Wildcard * Selector: Wildcard selector.
Inherited Styles: Styles inherited from a parent element.

The following sections explain each of these principles in detail.

2. Importance (!important)

In CSS, you can use !important to mark a style as important. A style declared with !important will take precedence over other styles. Here is a sample code:

<!DOCTYPE html> 
html> 
<head> 
<style> 
p { 
color: red !important; 
}
p {
color: blue;
}
</style> 
</head> 
<body> 

<p style="color: green;">Hello, world!</p> 

</body> 
</html>

In the example code above, the paragraph element p is defined with three different color styles: red, blue, and green. Because the red style has an !important declaration, the final color of the paragraph element will be red.

3. Inline Styles

Inline styles are defined directly within an HTML element using the style attribute. These styles take precedence over styles defined in external style sheets. Here’s a sample code:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
color: blue; 
} 
</style> 
</head> 
<body> 

<p style="color: red;">Hello, world!</p> 

</body> 
</html>

In the above sample code, two color styles are defined for the paragraph element p: blue and red. Since the red style is an inline style, the final color of the paragraph element will be red.

4. ID Selector

The ID selector is defined using the id attribute of an HTML element. It has a higher precedence than class selectors and tag selectors. Here is a sample code:

<!DOCTYPE html> 
<html> 
<head> 
<style> #example {
color: red;
}
.example {
color: blue;
}
p {
color: green;
}
</style> 
</head> 
<body> 

<p id="example" class="example">Hello, world!</p> 

</body> 
</html>

In the example code above, the paragraph element p is assigned the colors red, blue, and green, respectively, using ID selectors, class selectors, and tag selectors. Because the ID selector has a higher priority, the final color of the paragraph element will be red.

5. Class Selectors

Class selectors are defined using the class attribute of HTML elements and have a higher priority than tag selectors. Below is an example code:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.example { 
color: red; 
} 
p { 
color: blue; 
} 
</style> 
</head> 
<body> 

<p class="example">Hello, world!</p> 

</body> 
</html>

In the above example code, the paragraph element p is defined with both a class selector and a tag selector style, red and blue respectively. Because the class selector has a higher precedence, the final color of the paragraph element will be red.

6. Tag Selector

A tag selector is a style defined by the HTML element’s tag name, also known as an element selector. Tag selectors have the lowest precedence and only take effect if no other selectors match. Here’s an example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
color: red; 
} 
</style> 
</head> 
<body> 

<p>Hello, world!</p> 

</body> 
</html>

In the example code above, the paragraph element p is styled red. Since no other selector defines a style with a higher precedence, the paragraph element’s color will be red.

7. Wildcard * Selector

The wildcard * selector matches all elements on the page and has a slightly higher precedence than tag selectors. Here is a sample code:

<!DOCTYPE html>
<html>
<head>
<style>
* {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>

<p>Hello, world!</p>

</body>
</html>

In the example code above, both the wildcard selector and the tag selector define different color styles. Because the wildcard selector has a higher precedence, the final color of the paragraph element will be red.

8. Inherited Styles

Inherited styles are styles passed down from a parent element to a child element. Only some styles are inherited. If a child element does not define its own styles, it will inherit the parent’s styles. Here’s a sample code:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
color: red; 
} 
</style> 
</head> 
<body> 

<div> 
<p>Hello, world!</p> 
</div> 

</body> 
</html>

In the sample code above, the div element defines a red style, while the paragraph element p does not have its own color style, so it will inherit the red style of the parent div element.

Conclusion

From the above explanation, we can draw the following conclusions:

Importance (!important) > Inline style > ID selector > Class selector > Tag selector > Wildcard * selector
Later-defined styles override earlier ones
Inherited styles can be passed to child elements, but not all styles are inherited

I hope this article has provided a clearer understanding of CSS style precedence and will enable you to better apply it in actual web development. When writing CSS styles, it’s important to fully consider the precedence rules in various situations to ensure that the final style meets your design requirements.

In addition to the precedence rules mentioned above, there are some special cases to note:

Adjacent selectors: If two styles have the same precedence, the later-defined style overrides the earlier one. For example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { 
color: blue; 
} 
p { 
color: red; 
} 
</style> 
</head> 
<body> 

<p>Hello, world!</p> 

</body> 
</html>

In the above example, even though the p element is styled twice, the final color will be red because the later style overrides the earlier one.

Cascading Style Sheets: CSS’s Cascading Style Sheets (CSS) specify how to determine the final style based on style sheets from different sources. Inline style sheets have the highest priority, followed by embedded and external style sheets, and finally the browser’s default style. When styles defined by the same selector exist in multiple style sheets, priority is determined based on the order in which the style sheets are loaded.

In general, understanding the rules for calculating CSS style priority is crucial for developers. When writing CSS styles, it’s important to set style priorities appropriately based on the specific situation to avoid style overrides or ineffectiveness. Also, consider using debugging tools like Chrome’s developer tools to check style priority to help confirm which styles are ultimately effective.