Question

Given the following

<div class="item">
    <p class="itemClass"><input type="text" id="1" name="field1" /><p>
    <p class="itemClass"><input type="text" id="2" name="field2" /><p>
</div>
<div class="item">
    <p class="itemClass"><input type="text" id="3" name="field3" /><p>
    <p class="itemClass"><input type="text" id="4" name="field4" /><p>
</div>
<div class="item">
    <p class="itemClass"><input type="text" id="5" name="field5" /><p>
    <p class="itemClass"><input type="text" id="6" name="field6" /><p>
</div>
..............etc

How could I target so that odd number fields style differently to even number fields.
I thought maybe I could swap out the P tags for lesser used h tags like..

<div class="item">
    <h4 class="itemClass"><input type="text" id="5" name="field5" /><h4>
    <h5 class="itemClass"><input type="text" id="6" name="field6" /><h5>
</div>

But I’m not sure how I would select each field. Currently I am using…

.itemclass input{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
padding: 1px 0px 1px 0px;
background:url(images/input-trans.png) repeat-x right center;
color: black;
border-color: white;
}

But clearly that apply’s to both inputs

thx

Answer 1

I agree with longchiwen that nth-child pseudoclass is probably the best solution for modern browsers with CSS3 support.

If you want to support browsers which do not understand this pseudoclass, the bulletproof solution would be using additional class for even items:

<div class="item">
    <p class="itemClass"><input type="text" id="1" name="field1" /><p>
    <p class="itemClass even"><input type="text" id="2" name="field2" /><p>
</div>

As you can see, you can assign many classes (space separated) to the tag.

And in CSS you just write:

.even input {
    background-color: #c0ffee
}

I’d also recommend to beautify the code by getting rid of itemClass class and use .item p instead of .itemClass.