Targeting nth column (made by column-count)

Question

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?

Is there always a set number of elements? Or is it dynamic, so that the number of elements in each column might change? — Blake Mann, Jan 06 '14 at 17:34
[`nth-column`](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) pseudo selector will hopefully soon be available — vsync, Aug 12 '18 at 16:08

score 8 · Accepted Answer · answered Jan 20 '14 at 15:48

8

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

answered Jan 20 '14 at 15:48

fxck

4,898
8
56
94

score 0 · Answer 2 · edited Jan 13 '17 at 03:04

0

Use nth-child selector like this

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

edited Jan 13 '17 at 03:04

Giacomo1968

25,759
11
71
103

answered Jan 06 '14 at 17:53

Andy.Diaz

3,369
2
22
24

Not gonna work, I need to align all elements of the first column to right, and all the element of the second column to the left. This would only align first and second element of the first column. – fxck Jan 08 '14 at 12:40

score 0 · Answer 3 · answered Jan 06 '14 at 18:45

0

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

answered Jan 06 '14 at 18:45

Zach Saucier

24,871
12
85
147

Well I a) don't want to use javascript b) both columns are aligned to left in your demo... the whole point I'm doing this _experiment_ for is that I'm trying to do this http://imgur.com/Bf6wPhW using css columns. The idea was to have li 50% width, so the border would look connected and left/right align would take care of the centering. – fxck Jan 08 '14 at 12:49

vals · Answer 4 · 2014-01-08T21:33:01.957

0

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

edited Jan 08 '14 at 21:33

answered Jan 06 '14 at 20:13

vals

61,425
11
89
138

Yeah that would work, but the number of items is variable, that's why I was looking for a way to target all element of each column or nth column. – fxck Jan 08 '14 at 12:52
Added a demo that creates elements dynamically. Works ok in IE and Firefox, currently with a bug in Chrome – vals Jan 08 '14 at 21:34
Then again, I only wanted to use css. I think that the correct answer is that it's not possible to target nth column with css. All these are just workarounds to make it somewhat work, but let's be honest, if it's not possible with pure css, then there are probably better ways of doing this, simply having two lists, or adding a special class to those that are supposed to be aligned a different way being two of them. – fxck Jan 10 '14 at 10:11

Targeting nth column (made by column-count)

4 Answers4

Linked