Html Question posted in
Some basic documentation can be found here.

Html – Conflict in css between body and universal

in css below, body selector have priority over universal selector.

    * {
    color: rgba(255, 3, 3, 0.966);
    }
    body {
    color: rgb(103, 231, 18);
    font-family: sans-serif;
    }

but when i load simple HTML like this:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <link href="style.css" rel="stylesheet" />
    <title>BLOG</title>
    </head>
    <body>
    <h2>BLOG</h2>
    <a href="index.html">Back to home</a>
    </body>
    </html>

universal selector would be applied. why is that?

i cleared browser cache and also tried in other browsers, but it didn’t work.
when i specife the tag like below it’s work correctly

    body h2,a {
    color: rgb(103, 231, 18);
    font-family: sans-serif;
}
Tags:

2

Answers


  1. 0

    The universal selector applies to all elements including the h2 and a you are using. The body selector has priority only on the elements it selects.

    Login or Signup to reply.
  2. 0

    The universal selector (*) has the lowest specificity (0,0,0,0).
    The type selector (e.g., body, h2, a) has a higher specificity (0,0,0,1).
    When there’s a conflict, the rule with higher specificity takes precedence.
    In your example:

    * {
  color: rgba(255, 3, 3, 0.966);
}
body {
  color: rgb(103, 231, 18);
  font-family: sans-serif;
}

    The * selector sets the color for all elements to red.

    The body selector overrides the color for the tag only and applies a font family.

    However, color is inherited by default by child elements like and unless explicitly overridden.

    Why the Universal Selector Seems to "Win"

    The color property set by * is applied to all elements, including and . Since you haven’t explicitly set the color property for these tags in your body rule, they inherit the color from the * rule instead of from body.

    Why Does body h2, a Work?

    When you explicitly target h2 and a:

    body h2, a {
  color: rgb(103, 231, 18);
  font-family: sans-serif;
}

    This rule has a higher specificity than *, so it overrides the universal selector for the specified elements.

    To ensure child elements inherit styles correctly, you can force inheritance or explicitly target them.

    Force Inheritance
    Use the inherit value for color in the body selector:

    body {
  color: rgb(103, 231, 18);
  font-family: sans-serif;
}

body * {
  color: inherit;
}

    This makes all child elements of inherit its color.

    Or explicitly Target Elements
    If you want child elements like h2 and a to have the same style as body, you can explicitly target them:

    body, body h2, body a {
  color: rgb(103, 231, 18);
  font-family: sans-serif;
}

    Why Browsers Behave This Way

    The universal selector applies to all elements, while the body selector applies only to the tag itself. Since color is inherited and not explicitly overridden for child elements in the body selector, the universal selector’s rule persists for those elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search