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?

A question: Why not two separate divs? What's the reasoning behind this requirement. — d0c, Aug 05 '14 at 09:55
Because the texts that should flow from one column to the other will be managed via a CMS with one single textfield to prevent the user from manually splitting the text. — user1706680, Aug 05 '14 at 11:17
What if there is only one div initially which is dynamically split afterwards using javascript? Also, could you elaborate on this -> "to prevent the user from manually splitting the text"? — d0c, Aug 05 '14 at 11:30
Yes, I am totally open to JS solutions. There would be Columnizer (http://welcome.totheinter.net/columnizer-jquery-plugin/) which is a bit too much for my needs, and I found a little snippet that counts the chars and then splits the text in two equal halfs (http://stackoverflow.com/a/8605762/1706680). I think this would be worth extending but my JS skills are very low level. // I don’t want to make the user think. In the CMS the text should be pasted into one single textfield (not into two whereas it would be easy to generate two divs); the columnizing should be done by the system. — user1706680, Aug 05 '14 at 11:40

score 1 · Answer 1 · answered Aug 05 '14 at 13:40

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/

score 0 · Answer 2 · answered Aug 04 '14 at 16:50

Sorry should be a comment --> what you have will not work as you are trying to target a child of the div columns if you look at your outputted HTML markup you will see there is no child elements under .columns column-count is a style there are no elements within .columns to apply additional styles to.

Target nth column using CSS multi-columns

2 Answers2