Style Iterative Tag Elements in Visualforce Pages

Visualforce Mar 16, 2015

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">

// 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>

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

CSS goes like this,

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

>Sample Output


you can view live demo [here](

Phanindra Mangipudi

Salesforce, Lightning Web Componets, Node.Js, Angular 2+, Bootstrap