CODEWITHSUNDEEP
htmlless
Gaurav
Gaurav

Reputation: 196

How to use if statements in width condition with LESS

i need help if statements with width condition in less. when i add (even) list, its divided width in to 50%-50%, if i add (odd) list, in my last li need to 100% width. i have also share codepen link & screenshot. thanks in advance

html code is :

<ul>
    <li><span> list 1</span></li>
    <li><span> list 2</span></li>
    <li><span> list 3</span></li>
    <li><span> list 4</span></li>
    <li><span> list 5</span></li>
</ul>

less code :

ul {
  list-style: none;
  max-width: 300px;
  li {
    width: 50%;
    float: left;
    color: white;
    box-sizing: border-box;
    padding: 5px;
    span {
      display: block;
      background-color: gray;
      padding: 3px;
    }
  }
}

codepen link : demo

image link : image preview

Upvotes: 0

Views: 292

Answers (2)

Akhil Aravind
Akhil Aravind

Reputation: 6130

You need to use 

&:nth-last-child(1):nth-child(odd) {
  width: 100%!important;
}

Check the updated style 

ul {
  list-style: none;
  max-width: 300px;

  li {
    width: 50%;
    float: left;
    color: white;
    box-sizing: border-box;
    padding: 5px;

    &:nth-last-child(1):nth-child(odd) {
      width: 100% !important;
    }

    span {
      display: block;
      background-color: gray;
      padding: 3px;
    }
  }
}

Check the jsfiddle demo Here

Upvotes: 2

Deepu Reghunath
Deepu Reghunath

Reputation: 9713

you can give li:nth-last-child(1):nth-child(odd). This will apply if the last child is an odd number. 

ul {
  list-style:none;
  max-width:300px;
}
li {
    width:50%;
    float:left;
    color:white;
    box-sizing:border-box;
       padding:5px;
    
}
span {
      display:block;
       background-color:gray;
      padding:3px;
}
li:nth-last-child(1):nth-child(odd) {
    width:100%;
}
<ul>
  <li><span> list 1</span></li>
  <li><span> list 2</span></li>
  <li><span> list 3</span></li>
  <li><span> list 4</span></li>
  <li><span> list 5</span></li>
</ul>

Upvotes: 1

Related Questions