Preparation
🎨 ⏐ CSS3 Questions
3. Specificity

Specificity in CSS

Specificity in CSS refers to the rules that determine which styles are applied to an HTML element when multiple conflicting styles are present. It defines the hierarchy of importance among CSS selectors, allowing browsers to decide which style rules to prioritize when rendering a web page.

Understanding Specificity:

  1. Inline Styles: Styles applied directly to an HTML element using the style attribute have the highest specificity.

  2. ID Selectors: Selectors targeting elements by their ID have higher specificity than class selectors.

  3. Class and Attribute Selectors: Selectors targeting elements by their class or attributes have lower specificity than ID selectors.

  4. Element and Pseudo-element Selectors: Selectors targeting elements or pseudo-elements have the lowest specificity.

Calculating Specificity:

Specificity is typically represented as a four-part value, with each part corresponding to the specificity of different types of selectors. The value is calculated as follows:

  • Inline styles contribute 1000 points to the specificity.
  • ID selectors contribute 100 points to the specificity.
  • Class, attribute, and pseudo-class selectors contribute 10 points to the specificity.
  • Element and pseudo-element selectors contribute 1 point to the specificity.

Example:

Consider the following CSS selectors:

/* Rule 1 */
#main-content {
    color: red;
}
 
/* Rule 2 */
p.special {
    color: blue;
}

In this example:

  • Rule 1 targets an element with the ID main-content, contributing 100 points to specificity.
  • Rule 2 targets <p> elements with the class special, contributing 10 points to specificity.

If both rules apply to the same element, the color specified in Rule 1 will be applied because it has a higher specificity due to the presence of an ID selector.

1. Inline Styles:

Inline styles are CSS styles applied directly to HTML elements using the style attribute. These styles have the highest specificity and will override any other CSS styles applied to the same element.

Example:

<div style="color: red;">This text is red.</div>

2. ID Selectors:

ID selectors target HTML elements by their unique ID attribute. They have higher specificity than class or tag selectors, but lower specificity than inline styles.

Example:

#main-content {
    color: blue;
}

3. Class and Attribute Selectors:

Class selectors target HTML elements by their class attribute, while attribute selectors target elements by specific attributes. They have lower specificity than ID selectors but higher than tag selectors.

Example:

.special {
    font-weight: bold;
}
 
input[type="text"] {
    border: 1px solid black;
}

4. Element and Pseudo-element Selectors:

Element selectors target HTML elements directly, while pseudo-element selectors target specific parts of elements (e.g., the first line or first letter). They have the lowest specificity.

Example:

p {
    font-size: 16px;
}
 
p::first-line {
    text-transform: uppercase;
}

5. Calculating Specificity:

Specificity is calculated based on the combination of selectors used in a CSS rule. It's represented as a four-part value, where each part corresponds to a type of selector.

6. Importance of Specificity:

Understanding specificity is crucial for writing maintainable CSS code. It helps avoid unintended styling conflicts and ensures that styles are applied as intended.

Remember to review these concepts thoroughly and practice implementing them in code examples. Good luck with your interview preparation!

2. Cascading4. Flexbox