<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?
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>