Ziel 2, 3, 6, 7, 10 usw. im Behälter

Question

Ich kann diesen nicht knacken. So treffen Sie die Elemente wie folgt: 2, 3, 6, 7, 10 usw. Gibt es einen jQuery- oder CSS-Trick? Ich kann das einfach nicht herausfinden

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px; 
  max-width: 200px;
  margin: auto;
}


.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
  background: green;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

jquery css

0

Keviin Cosmos 18 Apr. 2018 im 19:49

Answer 1

Sie können dies mit zwei Selektoren tun: .container > div:nth-child(4n+2) und .container > div:nth-child(4n+3):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px;
  max-width: 200px;
  margin: auto;
}

.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
  background: green;
}

.container>div:nth-child(4n+2),
.container>div:nth-child(4n+3) {
  background: red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

5

j08691 18 Apr. 2018 im 17:00

Answer 2

Möglicherweise suchen Sie nach dem Pseudoklassen-Selektor nth-of-type(n) -

Wie in .item:nth-of-type(3)

In Ihrem Fall sollten die von @nurdyguy genannten Muster funktionieren

Siehe Beispiel-CSS unten im Snippet.

Weitere Informationen finden Sie hier: https: //developer.mozilla .org / de-US / docs / Web / CSS /% 3Anth-of-Type

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* beautifying */
  background: pink;
  padding: 20px;
  max-width: 200px;
  margin: auto;
}

.item {
  content: "";
  width: 48%;
  text-align: center;
  height: 60px;
}


/* Selects a patterned .item element */
.item:nth-of-type(4n+2),
.item:nth-of-type(4n+3){
  background-color: lime;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

1

blurfus 18 Apr. 2018 im 17:08

Answer 3

Ich denke du willst diese Art von Serie

2 3 
6 7
10 11
14 15
18 19
4n + 2 = 2 6 10
4n + 3 = 3 7  11

In CSS schreiben Sie das n-te Kind (4n + 2) und das n-te Kind (4n + 3)

0

Janki Gandhi 18 Apr. 2018 im 17:04

Answer 4

Verwenden Sie Ihr CSS wie folgt:

.container>div:nth-child(2),
.container>div:nth-child(3),
.container>div:nth-child(6),
.container>div:nth-child(7),
.container>div:nth-child(10){
  background: red;
}

-1

Guilherme Lemmi 18 Apr. 2018 im 17:10

Ziel 2, 3, 6, 7, 10 usw. im Behälter

4 Antworten

Neue Fragen

jquery