Как применить CSS к первому и предпоследнему div одного класса?

Question

[iAndyPC]

Есть 4 div одного класса, как применить css к первому и предпоследнему div?
Если вопрос задан неверно, то вот моя цель: чтобы все эти 4 новости по середине (div) имели одинаковые margin с лева и с права.
2 СВЕРХУ и 2 ВНИЗУ

Comments

[DanKud]

Выложите HTML-код нужного куска в сообщение или на какой-нибудь codepen.io
Никто не будет качать ваш файл, чтобы посмотреть код.

[iAndyPC]

<div class="column-center-center">
            <img src="img/navalny.png" alt="navalny">
            <h4>
              Алексей Навальный объявил акцию против пенсионной реформы 1 июля
            </h4>
            <p>
              <a href="#">/ Политика</a>&nbsp;
              <img src="img/icon-time.png" alt="icon-time"> 15:48
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/icon-comments.png" alt=""> 15
            </p>
          </div>
          <div class="column-center-center">
            <img src="img/passport.png" alt="passport">
            <h4>
              Дума увеличила пошлины за выдачу загранпаспортов и водительских прав
            </h4>
            <p>
              <a href="#">/ Общество</a>&nbsp;
              <img src="img/icon-time.png" alt="icon-time"> 15:56
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/icon-comments.png" alt=""> 10
            </p>
          </div>
          <div class="column-center-center">
            <img src="img/girl.png" alt="girl">
            <h4>
              В России заработал стриминговый сервис </br>YouTube
            </h4>
            <p>
              <a href="#">/ Интернет</a>&nbsp;
              <img src="img/icon-time.png" alt="icon-time"> 15:48
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/icon-comments.png" alt=""> 15
            </p>
          </div>
          <div class="column-center-center">
            <img src="img/football.png" alt="navalny">
            <h4>
              Кейн признан лучшим </br>игроком матча ЧМ-2018 </br>Тунис — Англия
            </h4>
            <p>
              <a href="#">/ Политика</a>&nbsp;
              <img src="img/icon-time.png" alt="icon-time"> 15:48
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="img/icon-comments.png" alt=""> 15
            </p>
          </div>

.column-center-center {
  float: left;
  width: 222px;
  height: 233px;
  margin-top: 19px;
  margin-bottom: 10px;
}

    .column-center-center h4 {
      font-size: 14px;
      margin-top: 4px;
      margin-bottom: 0;
    }

    .column-center-center p {
      font-size: 12px;
    }

    .column-center-center a {
      padding: 3px;
      text-decoration: none;
      color: #a9a9b3;
    }

    .column-center-center p img {
      display: inline-block;
      vertical-align: top;
    }

[DanKud]

Раз 10 прочитал ваш вопрос. Вообще не понял, что вы хотите. Ну есть у вас 4 блока .column-center-center, которые вы написали, и что вы хотите от них?

Answer 1

[danilr]

Вот ВАШ вариант

Comments

[iAndyPC]

Все правильно)) только я ступил, неправильно вопрос задал, надо было между ними сделать margin одинаковый)

Answer 2

[Вадим Кот]

Если к первому и предпоследнему из четырех, то это соответственно первый и третий. Получается нужно применить стили к нечетным элементам.

.column-center-center:nth-child(odd) {
  /* стили для первого и третьего элемента */
}