html - How to customize elements within the same class -
given 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 target odd number fields style differently number fields. thought maybe swap out p
tags 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 select each field. 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 apply's both inputs
thx
i agree longchiwen nth-child pseudoclass best solution modern browsers css3 support.
if want support browsers not understand pseudoclass, bulletproof solution using additional class 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 can see, can assign many classes (space separated) tag.
and in css write:
.even input { background-color: #c0ffee }
i'd recommend beautify code getting rid of itemclass
class , use .item p
instead of .itemclass
.
Comments
Post a Comment