CODEWITHSUNDEEP
htmlcss
uyed gtharet
uyed gtharet

Reputation: 23

Shouldn't class have preference over * selector

<head>
    <link href="scribble.css" rel="stylesheet" type="text/css"/>
</head>
    
<body>
    <a> text </a>
    <p class="para"> 
        <ul>text</ul>
        <a>text1 </a>
    </p>
</body>

My css goes like this:

*{background-color:#ccc;}

.para{background-color:red;}

For some Reason only the universal selector is being applied and all backgrodun is gray. Why? Shouldn't the class have precedence over the universal selector?

Upvotes: 2

Views: 64

Answers (1)

Dom
Dom

Reputation: 40461

Consider what it's doing.

<p class="para"> 
   <ul>text</ul>
   <a>text1</a>
</p>

Only .para has a background color of red so only that particular element will receive that attribute. However, the universal selector is explicity telling all other items to have a background color of #ccc. Since the ul/a elements do not use that class, it means those elements will honor the universal selector background-color:#ccc;. CSS would assume you mean something like:

ul, a {background-color:#ccc;}

If you were to add any text to the .para, however, it would have that red background color, e.g.

* {
  background-color: #ccc;
}

.para {
  background-color: red;
}
<p class="para"> 
  Hello
   <ul>text</ul>
   <a>text1</a>
</p>

Also having those elements use the .para class will make them red.

* {
  background-color: #ccc;
}

.para {
  background-color: red;
}
<p class="para"> 
   <ul class="para">text</ul>
   <a class="para">text1</a>
</p>

Upvotes: 2

Related Questions