vssrnr vssrnr - 7 days ago 5
CSS Question

skip column count css attribute for li

I have a multi column drop-down where first line is the heading saying "Select the options" it should be whole column. From second line It has to be considered column-count. The reason I am asking this specific layout is there is another functionality associated with it.

I am checking if there is an easy way to solve this by CSS?

Problem:

Can we ignore first li exclude from column count? Basically, first li is the heading saying "Select the options". I wanted it to be

<ul style="column-count: 2;">
<li style="color: gray;" class="label-default">Select the options</li>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
<li>option5</li>
<li>option6</li>
<li>option1</li>
<li>option2</li>
<li>option3</li>
<li>option4</li>
<li>option5</li>
<li>option6</li>
</ul>


Thanks in advance

Answer

You can use position: absolute on the first li and set a padding on the ul pushing the columns down.

ul {
  position: relative;
  padding-top: 20px;
  column-count: 2;
}
ul li.label-default {
  position: absolute;
  left: 0;
  top: 0;
  color: gray;
}
<ul>
  <li class="label-default">Select the options</li>
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  <li>option4</li>
  <li>option5</li>
  <li>option6</li>
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  <li>option4</li>
  <li>option5</li>
  <li>option6</li>
</ul>

Comments