Style Iterative Tag Elements in Visualforce Pages

Phanindra Mangipudi -

Many times we come across situation where styling need to be done on Iterative elements like repeat, dataTable, PageBlockTable where we dont have control over naming style classes on elements.

Then How we're style those? Check Following sample

// sample Vf Page, assuming 'getList' has size '3' so it renders 3 div's
<apex:repeat value="{getList}" var="a">
	<div>{!a}</div>
</apex:repeat>

// sample output rendered by  Vf Page, you can view by using Inspect Element
<div class="main">
    <div>Div One</div>
    <div>Div Two</div>
    <div>Div Three</div>
</div>

Now we want to style 2nd Div generated by apex:repeat,

CSS goes like this,

css
.main div:nth-child(2){
color: red;
font-weight: bold;
}


>Sample Output

![](/content/images/2015/03/Screen-Shot-2015-03-16-at-10-14-00-AM.png)

you can view live demo [here](http://jsfiddle.net/6ws30qyv/)