Changin background of list item

HTML & CSS
1

Can you please tell me how I can change the background of the last list item? I need it to be black, but I can’t think of a way to do it without adding a whole new class, which would affect the rest of the page. html and css below. any help much appreciated.

<ul class="products">
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product schools lea call-parents"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="">Call Parents</a>&nbsp; <span class="description">text &amp; email messaging</span></li>
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product schools lea ourschoolsapp"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="">OurSchoolsApp</a>&nbsp; <span class="description">personalised app for schools</span></li>
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product schools lea truancy-call"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="">Truancy Call</a>&nbsp; <span class="description">improve school attendance</span></li>
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product lea looked-after-call"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="">Looked After Call</a>&nbsp; <span class="description">managing looked after children</span></li>
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product lea term-time-tracker"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="/">Term Time Tracker</a>&nbsp; <span class="description">managing extended holiday absence</span></li>
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product lea schools text-someone"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="">Text Someone</a>&nbsp; <span class="description">bullying reporting system</span></li>
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product schools lea ementoring e-mentoring"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="">e-mentoring</a>&nbsp; <span class="description">secure mentoring communication</span></li>
  <li style="cursor: pointer; display: list-item; opacity: 1;" class="product schools lea reggie"><a class="button l-arrow no-hover-styling" href=""></a><a class="logo" href="">reggie</a>&nbsp; <span class="description">reggie</span></li>
</ul>

    #product-chooser .products .product {
    border-bottom: 1px solid rgba(12,84,113,0.24);
    padding: 4px 8px 8px 8px;
    background: #e2f6fb;
    background: -o-linear-gradient(left, #f4fcfe 0%, #e2f6fb 68%, #e2f6fb 100%);
    background: -moz-linear-gradient(left, #f4fcfe 0%, #e2f6fb 68%, #e2f6fb 100%);
    background: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0%, #f4fcfe), color-stop(68%, #e2f6fb), color-stop(100%, #e2f6fb));
    background: -webkit-linear-gradient(left, #f4fcfe 0%, #e2f6fb 68%, #e2f6fb 100%);
    background: linear-gradient(left, #f4fcfe 0%, #e2f6fb 68%, #e2f6fb 100%)}
2

Hi,

For IE9+ you can do this:


#product-chooser .products .product:last-child{background:black}

(In that list posted you do already have a unique class on the last list item of “reggie” but I guess that class won’t always be last in the list.)

3

Simply use either last-child or nth-last-child. For example add this:

    		
ul li:nth-last-child(1) {
    background: #000;
}
4