CSS specificity hierarchy

 

CSS Icon


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.

Comments

Popular posts from this blog

useCallback hook in React

Enhance existing Laravel CRUD application with advanced search and filtering capabilities.

VS code shortcut