Шаблоны дочерних селекторов CSS - PullRequest
Новая
       23

Шаблоны дочерних селекторов CSS

0 голосов
/ 28 июня 2018

Я строил сетку 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>

CODEPEN: https://codepen.io/Dennisade/pen/gzVZjL?editors=1100

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

1 Ответ

0 голосов
/ 28 июня 2018

Вы должны добавить формулу 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>

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

...