CSS Specificity

CSS Specificity is the mechanism that determines which styles should be applied to an element when multiple styles are defined for the same element. It is important to understand CSS Specificity because it can affect how styles are applied to elements, and it can cause conflicts in styles.

CSS Specificity is calculated based on the number of selectors, the number of IDs, the number of classes, and the number of pseudo-classes that are used in a selector.

The following examples will illustrate how CSS Specificity works:

Example 1:

p {
  color: red;
}

#my-paragraph {
  color: blue;
}

In this example, we have defined two styles for the p element. The first style sets the color to red, and the second style sets the color to blue for the element with the ID my-paragraph. Because the second style is more specific (it has an ID selector), it will be applied to the element with the ID my-paragraph, and the color will be blue.

Example 2:

p {
  color: red;
}

p span {
  color: blue;
}

In this example, we have defined two styles for the p element. The first style sets the color to red, and the second style sets the color to blue for any span element that is a descendant of a p element. Because the second style is more specific (it has a descendant selector), it will be applied to the span element, and the color will be blue.

Example 3:

p {
  color: red;
}

#my-paragraph span {
  color: blue;
}

In this example, we have defined two styles for the p element. The first style sets the color to red, and the second style sets the color to blue for any span element that is a descendant of an element with the ID my-paragraph. Because the second style is more specific (it has an ID selector), it will be applied to the span element that is a descendant of the element with the ID my-paragraph, and the color will be blue.

Example 4:

p {
  color: red;
}

p.blue {
  color: blue;
}

In this example, we have defined two styles for the p element. The first style sets the color to red, and the second style sets the color to blue for any p element with the class blue. Because the second style is more specific (it has a class selector), it will be applied to the p element with the class blue, and the color will be blue.

Example 5:

p {
  color: red;
}

p:first-child {
  color: blue;
}

In this example, we have defined two styles for the p element. The first style sets the color to red, and the second style sets the color to blue for the first child p element. Because the second style is more specific (it has a pseudo-class selector), it will be applied to the first child p element, and the color will be blue.

In conclusion, understanding CSS Specificity is essential when it comes to writing effective and efficient CSS code. By being aware of the selectors you use and their specificity, you can avoid conflicts and ensure that your styles are applied correctly.