Category: Education

- CSS Questions & Answers – Specificity and Importance Specificity in CSS determines which style rule is applied when multiple rules target the same element. It is calculated based on the types of selectors used in the rule, with more specific selectors having higher priority. Specificity hierarchy is as follows: Inline styles (highest specificity) IDs (e.g., #id) Classes, attributes, and pseudo-classes (e.g., .class, [type="text"], :hover) Elements and pseudo-elements (e.g., div, p::after) Specificity is calculated by assigning values to each of these categories. For example, a rule with an ID selector (e.g., #header) has higher specificity than one with a class selector (e.g., .menu). Importance in CSS is determined using the !important flag. It forces a style to be applied even if other rules have higher specificity. Example: css Copy code /* Lower specificity */ p { color: red; } /* Higher specificity */ #main p { color: blue !important; } In this case, the text color will be blue, as it uses both higher specificity and the !important flag.