Шаблоны дочернего селектора CSS

Я построил сетку flexbox и подумал, как лучше всего установить структуру или какой-то шаблон, который повторяется в какой-то момент. Сейчас я использую селектор: nth-child. Но я хочу избежать сотен селекторов только для сетки.

Вот небольшой пример, который я сделал:

КОД:

main {
  position: relative;
  margin: 0 auto 0 auto;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}

.item {
  margin: 50px 20px;
  text-align: center;
  position: relative;
}

.item img {
  width: 100%;
}

.projectTitle {
  position: absolute;
  width: 95%;
  top: 100%;
}

.item:nth-child(1) {
  width: 26%;
}

.item:nth-child(2) {
  width: 27%;
}

.item:nth-child(3) {
  width: 26%;
}

.item:nth-child(4) {
  width: 29%;
}

.item:nth-child(5) {
  flex-basis: 27%;
}

.item:nth-child(6) {
  flex-basis: 26%;
}

.item:nth-child(7) {
  flex-basis: 36%;
}

.item:nth-child(8) {
  flex-basis: 36%;
}

.item:nth-child(9) {
  width: 26%;
}

.item:nth-child(10) {
  flex-basis: 29%;
}

.item:nth-child(11) {
  flex-basis: 26%;
}

.item:nth-child(12) {
  flex-basis: 75%;
}

.item:nth-child(13) {
  width: 26%;
}

.item:nth-child(14) {
  flex-basis: 29%;
}

.item:nth-child(15) {
  flex-basis: 26%;
}

<main>
  <div class = "row">
    <div class = "item">
      <img src = "http://via.placeholder.com/875x1200">
      <div class = "projectTitle">
        Hello<br><span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/480x655">
      <div class = "projectTitle">
        Hello<br><span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/475x650">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/800x450">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/875x625">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/655x480">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/475x650">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/800x450">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/520x250">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/475x625">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/480x655">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/480x655">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/475x625">
      <div class = "projectTitle">
        Hello<span>Title</span>
      </div>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/480x655">
      <p>Title</p>
    </div>
    <div class = "item">
      <img src = "http://via.placeholder.com/480x655">
      <p>Title</p>
    </div>
</main>

КОДЕПЕН:https://codepen.io/Dennisade/pen/gzVZjL?editors=1100

Было бы очень приятно получить здесь совет :)

а какой здесь узор?

— 28.06.2018 10:42

Я должен повторить сетку один за другим с помощью селектора nth-child. Но я хочу этого избежать. Я хочу больше так: 1-й ряд: 3 эскиза 2-й ряд: 1 эскиз 3-й ряд: 2 эскиза Повторите это ^

— 28.06.2018 10:45

Но без написания сотен селекторов

— 28.06.2018 10:46

Почему бы тебе не попробовать Sass

— 28.06.2018 10:46

@Duck_dragon, спасибо за это ... у вас есть какой-нибудь совет / отправная точка для этого?

— 28.06.2018 10:47

вы можете сослаться на эту ссылку css-tricks.com/loops-css-preprocessors. Надеюсь, поможет

— 28.06.2018 10:49

Спасибо ... Я попробую!

— 28.06.2018 10:52

html css sass css-selectors

28.06.2018 10:39

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны захотеть добавить формулу an+b в свой селектор :nth-child() в соответствии с желаемым шаблоном.

Вот рабочий фрагмент, демонстрирующий принцип:

body {
  position: relative;
  margin: 0 auto 0 auto;
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}

.item {
  margin: 50px 20px;
  text-align: center;
  position: relative;
}

.item img {
  width: 100%;
}

.projectTitle {
  position: absolute;
  width: 95%;
  top: 100%;
}

/* TAKIT: Here is what I'll do: */
.item:nth-child(6n+1) { width: 25%; }
.item:nth-child(6n+2) { width: 25%; }
.item:nth-child(6n+3) { width: 25%; }
.item:nth-child(6n+4) { width: 80%; }
.item:nth-child(6n+5) { width: 40%; }
.item:nth-child(6n)   { width: 40%; }

<div class = "row">
  <div class = "item">
    <img src = "http://via.placeholder.com/875x1200">
    <div class = "projectTitle">
      Hello<br><span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/480x655">
    <div class = "projectTitle">
      Hello<br><span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/475x650">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/800x450">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/875x625">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/655x480">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/475x650">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/800x450">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/520x250">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/475x625">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/480x655">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/480x655">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/475x655">
    <div class = "projectTitle">
      Hello<span>Title</span>
    </div>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/480x655">
    <p>Title</p>
  </div>
  <div class = "item">
    <img src = "http://via.placeholder.com/480x655">
    <p>Title</p>
  </div>

Надеюсь, поможет.

Ах, здорово! Именно то, что я искал. Большое спасибо.

— 28.06.2018 11:11

@Dennis Рад, что это помогло. :)

— 28.06.2018 11:20

28.06.2018 11:02