Using separator in column count

Question

I want to use a separator in every column while using the column-count of CSS.

HTML:

<ul class="channel_list">
    <li><input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
    <li><input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
    <li><input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
    <li><input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
    <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>

CSS:

.channel_list{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.channel_list li{ list-style: none}

What i want something like-

I try:

.channel_list li{ border-right: 5px solid red}

Only the border at the right side of the li's but not in the last column.

Harry · Accepted Answer · 2016-06-16T05:33:21.740

If my understanding of the question is correct, you can achieve this using the column-rule property. It is a shorthand property which comprises of column-rule-width, column-rule-color and column-rule-style. These three long-hand properties work exactly similar to border-width, border-color and border-style. column-rule-style supports all values that are supported by border-style.

Note that you can't produce rounded separators (that is, there is no equivalent of border-radius).

(The property still needs vendor prefixes in all browsers other than IE!.)

.channel_list {
  padding: 0;
  text-align: center; /* make the separator look like it is in middle */
  -webkit-column-count: 3;  /* Chrome, Safari, Opera */
  -moz-column-count: 3;  /* Firefox */
  column-count: 3;
  
  /* just for spacing */
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.channel_list li {
  list-style: none;
}
.channel_list.solid {
  -webkit-column-rule: 5px solid red;
  -moz-column-rule: 5px solid red;
  column-rule: 5px solid red;
}
.channel_list.dashed {
  -webkit-column-rule: thin dashed chocolate;
  -moz-column-rule: thin dashed chocolate;
  column-rule: thin dashed chocolate;
}
.channel_list.dotted {
  -webkit-column-rule: medium dotted rebeccapurple;
  -moz-column-rule: thin dotted rebeccapurple;
  column-rule: thin dotted rebeccapurple;
}

<ul class="channel_list solid">
  <li>
    <input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
  <li>
    <input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
  <li>
    <input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
  <li>
    <input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
  <li>
    <input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>
<hr>
<ul class="channel_list dashed">
  <li>
    <input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
  <li>
    <input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
  <li>
    <input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
  <li>
    <input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
  <li>
    <input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>
<hr>
<ul class="channel_list dotted">
  <li>
    <input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
  <li>
    <input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
  <li>
    <input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
  <li>
    <input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
  <li>
    <input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>

I make the image by hard drawing, cause i need to set the border middle, but my try goes to right and also the last one. Your guess in right and i need this, but is it possible to make the rule middle??? — , Jun 16 '16 at 05:17
Sorry, didn't quite get you. Are you saying that the separator should be exactly in the middle (equal space on either side) of the columns and that there should be no separator on the right edge? — Harry, Jun 16 '16 at 05:19
@RivnatNasah: But you ask a good question. Let me see if there is a way to get it in the middle. If I manage to find one, I'll update the answer and ping you :) — Harry, Jun 16 '16 at 05:23
@RivnatNasah: There seems to be no specific property to get the separator in the middle. We can give the `column-gap` but depending on actual width of columns that changes and so line doesn't always remain in the middle. One workaround would be to use `text-align: center` on the `ul` (like in the updated answer). — Harry, Jun 16 '16 at 05:34
Yes, I think about to do this at the end of your complete answer. I can't seem anything without this. — , Jun 16 '16 at 05:36

score 0 · Answer 2 · answered Jun 16 '16 at 05:18

0

Use column rule

     -webkit-column-rule: 4px outset red; /* Chrome, Safari, Opera */
     -moz-column-rule: 4px outset red; /* Firefox */
     column-rule: 4px outset red;

Codepen URL - http://codepen.io/nagasai/pen/jrrGGX for reference

Hope this works for you

answered Jun 16 '16 at 05:18

Naga Sai A

10,771
1
21
40

column-rule is the CSS property for the styling(width,style,color) between columns – Naga Sai A Jun 16 '16 at 05:25
Use column gap...for adjusting that the spacing and position the separator to center -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; – Naga Sai A Jun 16 '16 at 05:32
I already get my answer that is same strategy.. But thanks for your time. – Jun 16 '16 at 05:34

Sagar Kodte · Answer 3 · 2016-06-16T05:43:16.117

0

Just another alternate solution.

.channel_list{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.channel_list li{ list-style: none;border-right:5px solid red}
.channel_list li:nth-child(n+9){border-right:none} /* selects from the ninth onwards */

<ul class="channel_list">
    <li><input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
    <li><input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
    <li><input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
    <li><input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
    <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
      <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 6</li>
      <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 7</li>
      <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 8</li>
      <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 9</li>
      <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 10</li>
       <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 11</li>
       <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 12</li>
</ul>

edited Jun 16 '16 at 05:43

answered Jun 16 '16 at 05:21

Sagar Kodte

3,723
4
23
52

But that would cause problems when you have different no. of children. For example, if there are six then the current selector would remove only the border on the last :) – Harry Jun 16 '16 at 05:22
This is only work for 5 channel and 3 column count. But not for dynamic one. Sorry for not mentioning my dynamic work. – Jun 16 '16 at 05:22
in this case we can use :nth-child property for specific children. I don't know about column-count CSS that's why i put this answer. – Sagar Kodte Jun 16 '16 at 05:25
As i already choose my answer, but if can you use :nth-child to complete this than i can make you upvote. – Jun 16 '16 at 05:35
yes. no problem.. i will add more channels and show you how to use. – Sagar Kodte Jun 16 '16 at 05:38
look i edited i added 12 channels. To select right corner channel that is from 9 to 12 so i used nth-child(n+9). – Sagar Kodte Jun 16 '16 at 05:44
Thanks, But its not dynamic, say if sometime i have only 6 channel and sometime 15 channel than i have change (n+..) right?? – Jun 16 '16 at 06:49

Using separator in column count

3 Answers3