Wednesday, February 11, 2009

Writing Selectors for Blogger

Writing the correct CSS selector can be tricky. For example given the code below, if you were trying to get to the h4 element and wrote:

#comment-post-message h4 { .....

You would not be selecting the h4 shown in the markup. Instead, you would be saying give me the h4 inside of comment-post-message. Your selector would target any h4 that is either a child or grandchild of comment-post-message.

But when you look at the Blogger HTML, you can see that the h4 is not a descendant of comment-post-message. The h4 itself is comment-post-message. So the correct way of writing the selector is:

h4#comment-post-message { ....

You could also skip the h4 since, even though not strictly enforced, an id is supposed to belong to only one element in the HTML.

Post a Comment