CODEWITHSUNDEEP
csscss-multicolumn-layout
fxck
fxck

Reputation: 4908

Targeting nth column (made by column-count)

Let's say I have this

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>


ul {
   column-count: 2;
}

and I want to align first column to right and the second to left, is there any way to target one of those columns using css selectors?

Upvotes: 8

Views: 4388

Answers (4)

Andy.Diaz
Andy.Diaz

Reputation: 3277

Use nth-child selector like this

ul li:nth-child(1) {
  text-align: right;
}
ul li:nth-child(2) {
  text-align: left;
}

Upvotes: 0

fxck
fxck

Reputation: 4908

As of now, there is no way to target nth column with pure css.

Upvotes: 8

vals
vals

Reputation: 64164

It is not clear if you want to align the whole column or the elements inside.

If you want the first one, Zach Saucier answer would be the way.

If it's the later, and you want a CSS only solution, it would be like that:

.container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
}

li {
    text-align: right;

}

li:nth-last-child(6) ~ li:nth-child(n+4) {
    text-align: left;
    background-color: lightblue;
}
li:nth-last-child(8) ~ li:nth-child(n+5) {
    text-align: left;
    background-color: lightblue;
}

li:nth-child(n+4) {
    color: red;
}

li:nth-last-child(6) {
    border: solid 1px green;
}

It is based in the asumption that the elements will have the same height, and so the 2nd column will begin in the middle element.

This solution has 2 problems.

First, it is cumbersome to write since you need rules for every number of elements in the list.

Second, it has a bug in the current version of Chrome, where it doesnt count properly the elements (that's why I have added extra styles to show what is going on)

demo

A better demo

dynamic demo

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25954

You can use column-gap to do what you want, though since one cannot use calc(100% - liWidth * colCount) as a value for column-count, you'd have to use some javascript right now

function calcGap() {
    var gap = window.innerWidth - (columnCount * listWidth) + "px";
    ul.style.webkitColumnGap = gap;
    ul.style.columnGap = gap;
}
calcGap(); // Fire on load
window.onresize = calcGap; // Fire on window resize

Demo

Using this method you can have whatever text-align you want as well as not messing up other alignment properties

Upvotes: 0

Related Questions