Skip to main content

Ivan Teoh

Something personal yet public

Misunderstand CSS Comma Syntax

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

84-style.css (Source)

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

I looked at it carefully and debugged using <a href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>. 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.

84-style-before.css (Source)

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

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.

84-style-after.css (Source)

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

Comments

Comments powered by Disqus