CSS specificity hierarchy

 

CSS specificity hierarchy listed from highest to lowest priority:

1. Inline Styles: These are styles applied directly to an element using the style attribute.

   • Example: <div style="color: red;">

2. ID Selectors: These are styles applied using the ID of an element, which is unique within a page.

   • Example: #header { color: blue; }

3. Class Selectors, Attribute Selectors, and Pseudo-classes: These include styles applied using class names, attributes, and pseudo-classes.

   • Examples:
     • Class: .main { color: green; }
     • Attribute: [type="text"] { color: yellow; }
     • Pseudo-class: :hover { color: purple; }

4. Element Selectors and Pseudo-elements: These are styles applied directly to HTML elements and pseudo-elements.

   • Examples:
     • Element: p { color: black; }
     • Pseudo-element: ::after { content: ""; }

5. Universal Selector and Inherited Styles: These styles have the lowest specificity and include the universal selector * and inherited styles from parent elements.

   • Examples:
     • Universal: * { color: gray; }
     • Inherited styles are those passed from parent elements to their children.

Understanding this hierarchy helps in determining which styles will be applied when there are conflicting rules.