Specificity is used when styling is implemented to the same element by two or more selectors. This decides the styling to be implemented. In specificity, we use points for each styling. The styling implementation with more points wins the styling. Let's look at the illustration to understand how points are counted in CSS:
Attributes | Priority Point |
Element | 1 |
Classes | 10 |
ID | 100 |
Inline styling | 1000 |
As we can see in the table above, an element has the least priority point, which is 1. Inline styling has the most priority points, which is 1000.
Therefore, if we use styling on both attributes, the inline styling will be displayed.
In the CSS (SCSS) tab:
<body> tag, which is an element. We also make both Name and Date of birth red. In the HTML file:
form tag. This is because it has more priority points than the body tag. This can be seen in the output. Free Resources