Is CSS generally more than a class or style rule?

Question

I use the * selector to indicate that unless I specify otherwise, the font color on the website should be set to a specific value.

*{ font-family:"Verdana"; color: #04468e; } 

So far so good. The problem is that this is the most general rule, and it should be easily redefined, for example,

 #profileMessageBoxHeader { background:url('images/profileMessageHeaderGradient.png') repeat-x #208ff6; height:178px; border-radius:10px 10px 0px 0px; color:#fff; } 

So the following code ...

 <div id="profileMessageBox"> <div id="profileMessageBoxHeader"> < <p>Please fill out the form and click submit. Your entered profile data will be provided to the tutor, to allow them to contact you.</p> </div> </div> 

Should produce white text. For some reason, however, the extremely general * rule overrides the more specific ID rule. Why?

Answer 1

* - universal selector and override settings in #profileMessageBoxHeader. This is the same as manual tuning of BODY, H1, P, TABLE, TR, TD, TH, PRE, UL, LI, ETC. For more information about this and how he can get around inheritance, Eric Meyer has a good article .

Apply the following and it should work:

 #profileMessageBoxHeader p { color: #FFF; } 

Example: http://jsfiddle.net/x7AnM/

Answer 2

Because * applies to <p> . If you change your CSS to:

 #profileMessageBoxHeader { background:url('images/profileMessageHeaderGradient.png') repeat-x #208ff6; height:178px; border-radius:10px 10px 0px 0px; } #profileMessageBoxHeader p { color:#fff; } 

... then it should work.

Answer 3

As far as I know, the element outweighs the identifier (search for CSS weight for more information) and * indicates (all) elements, so add a div element to your rule, for example. DIV # my_id

Answer 4

Because "*" matches any element. Thus, it matches the p tag in #profileMessageBoxHeader and overwrites the styles applied to the parent container (#profileMessageBoxHeader).

If you changed the style to #profileMessageBoxHeader p{ color: #fff; } #profileMessageBoxHeader p{ color: #fff; } , you will get white text. Or, if you changed the markup to remove the p tag, maybe

<h3 id = "profileMessageBoxHeader"> Your Text </h3>

which will also lead to white texts.

Answer 5

My little attempt to illustrate a cascade of your two styles.

  <div id="profileMessageBox"> Rule of parent Rule * <div id="profileMessageBoxHeader"> Rule of parent Rule * Rule of #profileMessageBoxHeader <p> Rule of parent Rule * </p> </div> </div>