0

Помогите, не могу убрать левую границу у пункта nth-child(1) не помогает

Вот код:

.team__social-item {
  width: 57px;
  height: 57px;
  background: #fce38a;
  text-align: center;
  line-height: 57px;
  border-left: 1px solid #f38181;
}
<ul class="team__social">
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-facebook-f"></i>
    </a>
  </li>
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-pinterest-p"></i>
    </a>
  </li>
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-instagram"></i>
    </a>
  </li>
</ul>

2 ответа 2

2

Вариант 1

* {
  padding: 0;
  margin: 0;
}

ul {
  display: flex;
}

li {
  list-style: none;
  width: 57px;
  height: 57px;
  background: #fce38a;
  text-align: center;
  line-height: 57px;
  border-left: 1px solid #f38181;
}

li:first-of-type {
  border-left: none;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Вариант 2

*{
    padding: 0;
    margin: 0;
}

ul{
    display: flex;
}
li {
    list-style: none;
    width: 57px;
    height: 57px;
    background: #fce38a;
    text-align: center;
    line-height: 57px;    
}
li + li{
    border-left: 1px solid #f38181;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

3
  • Спасибо, первый вариант сработал, но почему не сработал, nth-child, в чем разница между этими двумя псевдоклассами?
    – Артур
    16 окт 2018 в 16:55
  • разница между nth-child и nth-of-type - habr.com/post/119139
    – soledar10
    16 окт 2018 в 16:58
  • в вашем случае нет разницы между nth-child и nth-of-type - jsfiddle.net/soledar10/98tLgpdy
    – soledar10
    16 окт 2018 в 17:00
0

Вариант на display: inline-block;

.team__social {
  padding: 0;
}

.team__social::before {
  content: '';
  display: block;
  clear: both;
}

.team__social-item {
  list-style: none;
  display: inline-block;
  float: left;
  width: 57px;
  height: 57px;
  background: #fce38a;
  text-align: center;
  line-height: 57px;
  border-left: 1px solid #f38181;
}

.team__social-item:first-child {
  border-left: 0;
}
<ul class="team__social">
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-facebook-f"></i>
    </a>
  </li>
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-pinterest-p"></i>
    </a>
  </li>
  <li class="team__social-item">
    <a href="#" class="team__social-link">
      <i class="fab fa-instagram"></i>
    </a>
  </li>
</ul>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.