CSS specificity determines which styles are applied when multiple rules target the same element. The more specific a selector is, the higher its priority. Here's how the hierarchy works:
1. Element Selectors (e.g., p, h1, div)
2. Class Selectors (e.g., .button, .highlight)
3. ID Selectors (e.g., #header, #main-content)
4. Inline Styles (e.g., style="color: red;")
Specificity Calculation
Each type of selector contributes differently to the specificity score:
1. Inline styles contribute the most (1000).
2. ID selectors contribute 100.
3. Class selectors, attributes, and pseudo-classes contribute 10.
4. Element selectors and pseudo-elements contribute 1.
When conflicting styles are applied to an element, the one with the highest specificity wins.
Example 1: Element vs. Class Selectors
element-vs-class-selector.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../css/selectors/element-vs-class-selector.css"> </head> <body> <p class="highlight">This is a highlighted paragraph.</p> <p>This is a paragraph.</p> </body> </html>
element-vs-class-selector.css
p { color: blue; } .highlight { color: green; }
Open ‘element-vs-class-selector.html’ in the browser, you can see below screen.
Explanation
1. The p element selector has a specificity of 1.
2. The .highlight class selector has a specificity of 10.
3. The text in the paragraph with class highlight will be green because the class selector is more specific than the element selector.
Example 2: Class vs. ID Selectors
class-vs-id-selector.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../css/selectors/class-vs-id-selector.css"> </head> <body> <p id="important" class="highlight">This is an important paragraph.</p> <p class="highlight">This is a highlighted paragraph.</p> </body> </html>
class-vs-id-selector.css
/* File: ../css/styles.css */ .highlight { color: green; } #important { color: red; }
Explanation:
1. The .highlight class selector has a specificity of 10.
2. The #important ID selector has a specificity of 100.
3. The text in the paragraph with id ‘important’ will be red because the ID selector is more specific than the class selector.
Example 3: Inline Styles vs. ID Selectors
inline-style-vs-id-selector.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../css/selectors/inline-style-vs-id-selector.css"> </head> <body> <p id="important" class="highlight" style="color: green;">This is a paragraph.</p> </body> </html>
inline-style-vs-id-selector.css
/* File: ../css/styles.css */ #important { color: red; }
Explanation
1. The inline style has a specificity of 1000.
2. The #important ID selector has a specificity of 100.
3. The text in the paragraph will be green because inline styles override even the ID selector.
In summary,
1. Element selectors are the least powerful.
2. Class selectors are more powerful than element selectors.
3. ID selectors are more powerful than class selectors.
4. Inline styles are the most powerful, overriding even ID selectors.
Understanding this hierarchy helps in writing clean and efficient CSS, ensuring that the right styles are applied.
No comments:
Post a Comment