It doesn't work last-child.



  • Why doesn't it work? :last-child ?

    .group-list .user-name {
    border-bottom: 1px solid #e2e2e2;
    }
    .group-list .user-name:last-child {
    border-bottom: none;
     }
    

    https://jsfiddle.net/lilubanana/96rz47oe/

    .found-item {
      background: #fff;
      margin: 5px;
      padding: 5px 0;
      border-bottom: 1px solid #b6b6ba;
    }
    .found-item a {
      border-bottom: none;
    }
    .found-item a:hover {
      border-bottom: 1px solid #e8440d;
    }
    .found-item .user-name {
      padding: 5px 20px;
    }
    .found-item .user-name:hover {
      background: #e6e5e9;
    }
    .found-item .user-group {
      padding: 0 20px;
    }
    .found-item .icon-group {
      background-position: -13px -1215px;
      width: 14px;
      height: 14px;
      display: inline-block;
    }
    .group-title {
      text-transform: uppercase;
      font-weight: 600;
      font-size: 12px;
      padding-left: 25px;
      margin-top: 25px;
    }
    .group-list .user-name {
      border-bottom: 1px solid #e2e2e2;
    }
    .group-list .user-name:last-child {
      border-bottom: none;
    }
    <div class="group-list found-item">
      <a href="">
        <div class="user-name">
          <b>Теплов Алексей</b>
          <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span>
          <div>руководитель группы</div>
        </div>
      </a>
      <a href="">
        <div class="user-name">
          <b>Теплищев Вадим</b>
          <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span>
          <div>инженер</div>
        </div>
      </a>
    

    <a href="">
    <div class="user-name">
    <b>Теплавина Евгения</b>
    <span class="pull-right"><span class="icons icon-phone"></span> 25-354</span>
    <div>инженер</div>
    </div>
    </a>
    </div>

    Every element but the last one needs border-bottom♪ Addendum last-child Border is somehow removed from all elements.

    UPD

    In this case, reference styles do not affect display. They got their style. text-decoration: none;

    UPD 1.0

    All savages with class .user-name Stylish-- border-bottom: 1px solid #e2e2e2;

    The subject matter - the last diving class. .user-name Take it away. border-bottom

    PS: All savages with class .user-name Inside the classroom .group-list

    UPD 1.1

    In addition to style border-bottom I only use savages with class. .user-name It doesn't matter what's inside of them.



  • last-child Tega <а> That's it. <div class='username'>He is. first-child

    To remove the backing of references a { text-decoration: none; }

    .username b, .username span, .username div {
      border-bottom: 3px solid #FF0000;
    }
    

    .username :last-child {
    border-bottom: none;
    }

    <div class='grouplist found-item'>
    <a href=''>
    <div class='username'>
    <b>Теплов Алексей</b>
    <span class='pullright'><span class='icons icon-phone'></span> 25-354</span>
    <div>руководитель группы</div>
    </div>
    </a>
    </div>


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2