How to use nth-child

Standard

There is a CSS selector, really a pseudo-selector, called nth-child.

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b.

This example selector will match any paragraph that’s the first child element of its parent element (This is, of course, equivalent to the selector p:first-child):

p:nth-child(1) {
  /*declarations*/
}

Using a formula (an + b).
Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

If you want to specify a color for all p elements whose index is a multiple of 3:

p:nth-child(3n+0) {
    color: SteelBlue;
}

The following example selectors are equivalent, and will match odd-numbered table rows:

tr:nth-child(2n+1) {
  /*declarations*/
}
tr:nth-child(odd) {
  /*declarations*/
}

Select only the first 2 elements

p:nth-child(-n+2) {
    /*declarations*/
}

Select only the last 2 elements

p:nth-child(n+2) {
    /*declarations*/
}

If you want select elements within certain ranges, for an example, elements 4-8.

li:nth-child(n+4):nth-child(-n+8) {
    /*declarations*/
}

Style Placeholder Text

Standard

The placeholder text in inputs has a light gray color. To style it, you’ll need vendor prefix CSS properties.

/* Chrome / Safari / Opera 15+ */
::-webkit-input-placeholder { color: SteelBlue; }
/* Firefox 18- */
:-moz-placeholder { color: SteelBlue; }
/* Firefox 19+ */
::-moz-placeholder { color: SteelBlue; }
/* IE 10+ */
:-ms-input-placeholder { color: SteelBlue; }

Mobile-like menu without JS

Standard

I saw on a brazilian site how to make a ‘mobile menu’ without plugins.. besides the HTML code was wrong (menu tag to navigation), the same used jquery. The other thing is the method of animation, does not forcing hardware.
So, I take the challenge to make the same menu without javascript. Only with CSS. 🙂

Obviously, don’t work on ancient IE 😛 but you can always make a javascript to make the selector “:target” work in IE 😡 Continue reading