CSS: Styling Elements Alternately

Profile Photo

During the development stage of my WordPress blog theme, I have came across an issue to style my HTML elements alternately ( odd/even elements ).

Which I later found a way to do it without going through PHP. Instead, I’ve decided to use the CSS3 pseudo-selector approach like so.

/* To select elements that are odd-numbered who are using .post class */
.post:nth-child(odd)

/* To select odd-numbered elements with .post class that are NOT .featured and NOT .single */

.post:nth-child(odd):not(.featured):not(.single)