nth-child CSS pseudo-class Christmas colors
Lately /me noticed HN using Christmas color scheme for their post numbering, but the source sadly read <font color="#be2828">1.</font>
below is some silly code emulating the same behavior without font tag indeed!
nth-child CSS pesudo-class syntax is pretty simple : element:nth-child(an + b) { style properties }
that is matches an element that has an+b-1
siblings before it in the document tree, for a given positive or zero value for n
, and has a parent element.
So we want the Christmas coloring for ul, we can code as below :
//html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> //css li { color: blue } li:nth-child(odd) { color:green } li:nth-child(even) { color:red }
Checkout the demo and play around.
More examples from MDN :
tr:nth-child(2n+1)
Represents the odd rows of an HTML table.
tr:nth-child(odd)
Represents the odd rows of an HTML table.
tr:nth-child(2n)
Represents the even rows of an HTML table.
tr:nth-child(even)
Represents the even rows of an HTML table.
span:nth-child(0n+1)
Represents a span element which is the first child of its parent; this is the same as the :first-child selector.
span:nth-child(1)
Equivalent to the above.
span:nth-child(-n+3)
Three first span elements.
Recent blog posts
- watir-webdriver web inspector
- gem list to gemfile
- Packing ruby2.0 on debian.
- Made it into The Guinness Book!
- to_h in ruby 2.0
- Filter elements by pattern jQuery.
- Better HTML password fields for mobile ?
- Grayscale image when user offline
- nth-child CSS pseudo-class Christmas colors
- EventEmitter in nodejs