Question

This problem is similar to when creating alternate colour table-rows, only we are dealing with divs and margins instead of table rows and their colours.

The following code creates as many layers as there are genres returned from a query (if three genres are found, three layers are created); and within each layer created, the code creates as many layers as there are titles within that genre (for example, if there are five titles per genre, there will be three “genreName” layers, and inside each one there will be five “titleName” layers).

<cfoutput query="MyQuery" group="genreName">
    <div class="Genres">
        #MyQuery.GenreName#
        <cfoutput>
            <div class="Titles">
            #MyQuery.TitleName#
            <div>
        </cfoutput>
    </div>
</cfoutput>

This also means that all layers in each class are clones. If I have a columns layout where I do not want to assign a left/right margin to the first/last columns, this format breaks.

Is there a programmatic way to assign margins based on the layer number (record number, essentially) where I can apply conditional formatting (in this case, a left and right margin for the middle columns, and no left/right margins for first/last columns)?

Many thanks,

Answer 1

If what you actually want to do is having a fixed margin between elements, but none before the first nor after the last, you can use the first-child pseudo-class to overrule the general case:

has_margin { margin-left: 20px; }
column_container:first-child { margin-left: 0px; }

...
<div class="column_container">
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
     <div class="has_margin">...</div>
</div>

CSS3 defines a ‘structural pseudo selector’ that allows you to select every an+b’th child of an element. Setting a to the number of class clones allows you to define that many rules for each layer.