0
195
VisualizaçõesSet different color in every column css?
I am facing one problem in column-count css property. Here I have a list like this--
<ul class="list">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
<li>sixteen</li>
</Ul>
I have to do this like image--
I can add 4 column by following css
.list {
column-count: 4
}
But How can I give this red and white color after one another. I can't understand this.
Note: I have to create ul, li. I can't change this.
2 Respostas
Responde à pergunta0
It is better to use a different layout method instead of column-count: 4 because you can't use odd even functionality here and have to define color value to individual column created using nth:child
.list {
column-count: 4;
}
.list :nth-child(n+5) {
background: #FF0705;
}
.list :nth-child(n+9) {
background: blue;
}
.list :nth-child(n+13) {
background: green;
}<ul class="list">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
<li>sixteen</li>
</ul>A simple approach to 4 columns but you can look into display: flex property too.
#list {
display: flex;
}
div span {
display: block;
}
div:nth-child(even) {
background: #FF0705;
}<div id="list">
<div>
<span>one</span>
<span>two</span>
<span>three</span>
<span>four</span>
</div>
<div>
<span>five</span>
<span>six</span>
<span>seven</span>
<span>eight</span>
</div>
<div>
<span>nine</span>
<span>ten</span>
<span>eleven</span>
<span>twelve</span>
</div>
<div>
<span>thirteen</span>
<span>fourteen</span>
<span>fifteen</span>
<span>sixteen</span>
</div>
</div>0
As you don't know what the contents of the various li elements might be - they may take up very differing heights - you can't tell in advance which li element will be in which column.
It is therefore not safe to use nth-child other than under the most simplistic of circumstances (every li taking up the same space).
A different method is to set a background image on the ul element which has 'stripes' red and white going across each taking 25% of the width. The coloring is thus responsive.
.list {
column-count: 4;
background-image: linear-gradient(to right, white 0 25%, red 25% 50%, white 50% 75%, red 75% 100%);
}<ul class="list">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
<li>sixteen</li>
</Ul>