Changing CSS for Last <Li>

Changing CSS for last li

:last-child is really the only way to do it without modifying the HTML - but assuming you can do that, the main option is just to give it a class="last-item", then do:

li.last-item { /* ... */ }

Obviously, you can automate this in the dynamic page generation language of your choice. Also, there is a lastChild JavaScript property in the W3C DOM.

Here's an example of doing what you want in Prototype:

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

Or even more simply:

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

In jQuery, you can write it even more compactly:

$("ul li:last-child").addClass("last-item");

Also note that this should work without using the actual last-child CSS selector - rather, a JavaScript implementation of it is used - so it should be less buggy and more reliable across browsers.

Last element of li always change to specific after content

: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>

add style to the last child of the last child

That selector should be

.footer-container :last-child :last-child { ... }

(space after .footer-container)

Use css last-child change border

You need to wrap border divs and after that, with the use of :last-child you can achieve this.

The reason behind using wrapper is :last-child will only try to
match the very last child of a parent element

.border {  border: 3px solid black;  width: 80px;  display: inline-block;}
.border:last-child {  width: 40px;}

<div class="wrapper">  <div class="border"></div>  <div class="border"></div></div>

CSS: How to affect :after Pseudo Element if Last-Child li gets hovered?

li:nth-child(4):hover is already saying

li, which is the 4th element, which is being hovered

so li:nth-child(4):hover + li:last-child:after is looking for a 5th li sibling that immediately follows the 4th element and is also the last child.

li:nth-child(4):hover ~ li:last-child:after is looking for a 5th li sibling that is somewhere after the 4th element and is also the last child.

li:nth-child(4):hover > li:last-child:after is looking for an li that is a child of the 4th li and is also a last child.

and li:nth-child(4):hover li:last-child:after is looking for an li that is a descendant of the 4th li and is also a last child.

depending on what you're looking for you can either use:

li:nth-child(4):hover:after { transform: translatex(400px);}

li:last-child:hover:after { transform: translatex(400px);}

or li:nth-child(4):hover:last-child:after { transform: translatex(400px);} if you want to be consistent with the other ones.

ul {
  display: flex;
  width: max-content;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

a {
  display: block;
  width: 100px; height: 50px;
  color: white;
  background-color: orange;
}

/*Creating the pseudo element */
li:last-child:after {
  content: '';
  position: absolute;
  top: 100px;  left: 100px;
  width: 50px;  height: 50px;
  background-color: red;
  transition: transform 1s;
}

/*Creating the desired action for li childs 1 to 3*/
li:nth-child(1):hover ~ li:last-child:after { transform: translatex(100px);}
li:nth-child(2):hover ~ li:last-child:after { transform: translatex(200px);}
li:nth-child(3):hover ~ li:last-child:after { transform: translatex(300px);}

li:nth-child(4):hover:last-child:after { transform: translatex(400px);}

<div>
   <ul>
      <li><a href="#">Test 1</a></li>
      <li><a href="#">Test 2</a></li>
      <li><a href="#">Test 3</a></li>
      <li><a href="#">Test 4</a></li>
   </ul>
</div>

How to select a very last li in unknownd multi level ul

Yes you can, use :last-child CSS selector..

My fiddle

CSS

ul li:last-child {
    color: #ff0000;
}​

li {
    color: #000000;
}​

You can also use this :

CSS

ul li:nth-last-child(1) {
   color: #ff0000;
}

li {
   color: #000000;
}​

:last-child selector selects every element that is the last child of its parent.

Note : This was a CSS3 implementation, so some browser's will ignore this but wont spoil anything cuz you are just changing the color..

---

Related Topics