Sobes.tech
Middle

Name the specificity of CSS selectors in order of increasing priority.

sobes.tech AI

Answer from AI

The specificity of CSS selectors determines which style will be applied when multiple rules conflict. In order of increasing priority, specificity is as follows:

  1. Type selectors (elements) and pseudo-elements — for example, div, p, ::before.
  2. Classes, attributes, and pseudo-classes — for example, .class, [type="text"], :hover.
  3. ID selectors — for example, #header.
  4. Inline styles — styles directly written in the style attribute of an element.

Example:

/* Specificity: 0,0,0,1 */
div {}

/* Specificity: 0,0,1,0 */
.class {}

/* Specificity: 0,1,0,0 */
#id {}

/* Specificity: 1,0,0,0 */
style="color: red;" /* inline style */

The higher the specificity, the more priority the rule has.

Name the specificity of CSS selectors in order of… - sobes.tech