nth-of-type(n)
/*get even more specific and apply styles only to particular types of element. */
/*style the first paragraph:*/
article p:nth-of-type(1) { font-size: 1.5em; }
/*style imgs:*/
article img:nth-of-type(odd) { float: right; }
article img:nth-of-type(even) { float: left; }
/*Let’s say we want every second input element to have rounded corners on the bottom. We can achieve this with CSS:*/
input:nth-of-type(even) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
/*In our example, we want to apply this only to the fieldset for payment, because the fieldset for personal details has three text inputs.
We’ll also get a bit tricky and make sure that we don’t select any of the radio inputs. Here’s the final CSS:*/
#payment input:nth-of-type(even):not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px solid #999;
margin-bottom: 10px; }