CODEWITHSUNDEEP
htmlcsslistitem
victor
victor

Reputation: 537

Last element of li always change to specific after content

I make a list that contains a specific content, in this list with css I put a + when is the first li or middle element but if is the last I change the content with = in css.

I spect this: 1 + 2 + 3 = Result I obtain: 1 + 2 + 3 + Result

My code:

.list-look{
    padding-left: 0;
    overflow: hidden;
}
ul li{
    list-style: none;
}
.list-look li.itemsLook{
    padding-right: 10px;
    display: inline-block;
    float: left;
    width: 270px;
    position: relative;
  list-style: none;
}
ul li.itemsLook:not(:last-child)::before{
    speak: none;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    content: "+";
    
    float: right;
    font-size: 35px;
    width: 10px;
    top: 25%;
    right: 15px;
  
}
ul li.itemsLook:last-child::before{
    content: "=";
   
    float: right;
    top: 25%;
    
}
<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
  <div>
    Result
  </div>
</ul>

Upvotes: 0

Views: 705

Answers (2)

JakeParis
JakeParis

Reputation: 11210

:last-child looks for any element. You would want to use :last-of-type which will apply to the last <li> element in your example: 

.list-look{
    padding-left: 0;
    overflow: hidden;
}
ul li{
    list-style: none;
}
.list-look li.itemsLook{
    padding-right: 10px;
    display: inline-block;
    float: left;
    width: 4em;
    position: relative;
  list-style: none;
}
ul li.itemsLook:not(:last-of-type)::before{
    speak: none;
    font-style: normal;
    font-weight: 900;
    font-variant: normal;
    text-transform: none;
    content: "+";
    
    float: right;
    font-size: 35px;
    width: 10px;
    top: 25%;
    right: 15px;
  
}
ul li.itemsLook:last-of-type::before{
    content: "=";
   
    float: right;
    top: 25%;
    
}
<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
  <div>
    Result
  </div>
</ul>

Upvotes: 2

ecg8
ecg8

Reputation: 1392

Your example does not work as you expected because you are misunderstanding how :last-child works. It does not work to change the last li.itemsLook element, it works on that element only if it is the last child of the ul (which it is not in this case because you have a div as the last child. https://www.w3schools.com/cssref/sel_last-child.asp

One way around this might be to move the div out of the ul like so

<ul class="list-look">
  <li class="itemsLook">1</li>
  <li class="itemsLook">2</li>
  <li class="itemsLook">3</li>
</ul>
<div>
  Result
</div>

and then add ul, div { display: inline} to your CSS.

Upvotes: 1

Related Questions