CSS, CSS 3, wordpress

Zebra-striping the Comments

Zebra-striping the Comments

Zebra-striping, or highlighting every second element in a series, has traditionally involved selecting all the elements via javascript, then looping through them and highlighting all the odd elements. CSS 3 introduces the pseudo-class “nth-child”, which makes it ridiculously simple to do this without javascript. We’ll use it to zebra-stripe the comments.

  1. section#comments article:nth-child(2n+1) {
  2.     padding: 21px;
  3.     background: #E3E3E3;
  4.     border: 1px solid #d7d7d7;
  5.     /* Border-radius not implemented yet */
  6.     -moz-border-radius: 11px;
  7.     -webkit-border-radius: 11px;
  8. }

The weird value “2n+1″ is actually pretty simple if you understand what it stands for:

  • 2n selects every second item. If you wrote 3n it would select every third item, 4n every fourth item, and so on.
  • The +1 tells the browser to start at element 1. If you are familiar with programming you probably know that all arrays start at 0, and this is also true here. This means that element 1 is actually the second element in the series.

Alternatively, you could simply write:

  1. section#comments article:nth-child(odd) { … }

Since the standard includes the two most used values as shorthand, odd and even. The rest of the comment styling should be simple to understand with your new knowledge.

article reference : http://neolinx.com.np/blog/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s