Target nth column using CSS multi-columns

Question

Is it possible to target the nth column when using CSS multi-columns?

For example: I have a two-column layout and want to only target the 2nd column:

HTML

<div class="columns">   
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.   
</div>

CSS

.columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}
    
.columns:nth-child(odd) {
    margin-top: 100px;
}

http://jsfiddle.net/XH72Y/3/

If not do you have any other idea how to dynamically float text inside two columns (not two separate divs and not with CSS regions) with the ability to style each column separately?

Answer 1

Use a jQuery script to split the div into N columns:

var $columns = $('.columns');

$columns.each(function() {
    var $column = $(this);
    var numColumns = 2;
    var words = $column.text().split(" ");
    var columnLength = Math.round(words.length / numColumns);

    $column.html("");

    for (var i=0; i<numColumns; i++) {
        var columnArray = words.slice( (i * columnLength), ( (i + 1) * columnLength) );
        $column.append(
            $("<div>")
                .addClass("column")
                .html(columnArray.join(" ")));
    }
});

Now each column will be wrapped in a new div element with the class "column". Now you can style your columns using whatever CSS technique you like.

http://jsfiddle.net/XH72Y/4/