Science Knowings: CSS Course For Social Media

CSS Specificity

Transition from CSS Combinators to Specificity

Previously, we explored CSS combinators, which allow us to target specific elements based on their relationships within the HTML structure. Today, we move on to CSS specificity, which determines which styles are applied when multiple styles target the same element.

What is CSS Specificity?

CSS specificity is a value assigned to each CSS selector based on its composition. It determines which style rule is applied when multiple rules target the same element.

How is Specificity Calculated?

Specificity is calculated using the following formula:
1. Count the number of inline styles with the !important rule applied (weighted by 1000).
2. Count the number of ID selectors.
3. Count the number of class, attribute, and pseudo-class selectors.
4. Count the number of element and pseudo-element selectors.
5. The selector with the highest calculated value has the highest specificity.

The !important Rule

The !important rule can be used to override any other style rule. It is used sparingly, as it can make CSS code difficult to maintain.

Inline Styles vs. Embedded Styles vs. External Stylesheets

Inline styles have the highest specificity, followed by embedded styles, and then external stylesheets.

Class Specificity

A single class selector has a specificity of 0,1,0,0. Each additional class selector increases the specificity by 0,1,0,0.

ID Specificity

An ID selector has a specificity of 0,0,1,0. This is higher than any class selector specificity.

Universal Selector Specificity

The universal selector (*) has a specificity of 0,0,0,0. It is the least specific selector and is used to target all elements.

Descendant Selector Specificity

A descendant selector (e.g., div p) has a specificity of 0,0,0,1. Each additional descendant selector increases the specificity by 0,0,0,1.

Child Selector Specificity

pA child selector (e.g., div > p) has a specificity of 0,0,0,2. It is more specific than a descendant selector.

Adjacent Sibling Selector Specificity

An adjacent sibling selector (e.g., div + p) has a specificity of 0,0,0,3. It is more specific than a child selector.

General Sibling Selector Specificity

A general sibling selector (e.g., div ~ p) has a specificity of 0,0,0,4. It is the least specific of the sibling selectors.

Specificity and the Cascade

When multiple styles target the same element, the style with the highest specificity wins. If multiple styles have the same specificity, the last style applied in the source order wins.

Overriding Styles with Higher Specificity

To override a style with lower specificity, you can use a style with higher specificity. For example, to override an inline style, you can use an embedded style or an external stylesheet.

Tips for Managing Specificity

  • Use specific selectors to avoid conflicts.
  • Avoid using the !important rule.
  • Use a CSS preprocessor to manage specificity.
  • Write modular CSS to reduce the number of conflicting styles.
  • Test your CSS thoroughly to ensure it works as expected.

Next Topic: CSS Transitions

In the next session, we'll explore CSS transitions, which allow you to smoothly change the style of elements over time. Follow us to learn more!