Misunderstand CSS Comma Syntax

Yesterday I did a silly mistake. I misunderstand CSS Comma Syntax. This is the original edited code.

93
94
95

  1. div.entry-content h4, h5, h6, p {
  2. 	margin-bottom: 5px;
  3. }

I looked at it carefully and debugged using Firebug. I mentioned the div class, entry-content, for the paragraph. Why it is still affecting the header paragraph? After I split the CSS code, I understand it clearer.

93
94
95
96
97
98
99
100
101

  1. div.entry-content h4 {
  2. 	margin-bottom: 5px;
  3. h5 {
  4. 	margin-bottom: 5px;
  5. h6 {
  6. 	margin-bottom: 5px;
  7. p {
  8. 	margin-bottom: 5px;
  9. }

The code below is the correct solution. I should mention the div class, entry-content, for every tags after the commas. So sometime, short cut syntax can cause more mistaken occurred.

93
94
95

  1. div.entry-content h4, div.entry-content h5, div.entry-content h6, div.entry-content p {
  2. 	margin-bottom: 5px;
  3. }

Related Posts

Posted by Ivan @ June 25th, 2009 in WordPress with , ,

4 Comments »

4 Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">