Select the first three elements in CSS and repeat

2019-08-09 23:07发布

站内文章 / HTML/CSS
40 0 0

问题:

I have a list of N cards, floated, with width:33.3333%. When the user clicks on a card, it rotate and expands.

However, I would like that every 3:rd card started from the 1:st had a certain margin, every 3:rd card started from the 2:nd another margin and every 3:rd started from the 3:rd yet another margin.

Is there a way to do this with CSS selectors, for example child selector?

Plunker demo

Example:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body class="landing">
    <section id="intro">
      <div class="inner">
        <h2>Title</h2>
        <!-- Cards -->
        <div class="cards">
          <div class="riga">
            <div class="r2">
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb2.png" />
                      </div>
                      <div class="user">
                        <img src="img/img1.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                    Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb.png" />
                      </div>
                      <div class="user">
                        <img src="img/img2.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                   Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="r4">
                <div class="card-container manual-flip">
                  <div onclick="rotateCard(this)" class="card">
                    <div class="front">
                      <div class="cover">
                        <img src="img/rotating_card_thumb2.png" />
                      </div>
                      <div class="user">
                        <img src="img/img3.png" class="img-circle" />
                      </div>
                      <div class="content">
                        <div class="main">
                          <h3 class="name">Text</h3>
                          <p class="profession">Text</p>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                          <a onclick="rotateCard(this).disable();" class="actions button rimmed" href="#">Text</a>
                        </div>
                        <div class="footer">
                          <button class="btn btn-simple">
                                                    Info
                                                </button>
                        </div>
                      </div>
                    </div>
                    <div class="back">
                      <div class="header">
                        <h5 class="motto">Text</h5>
                      </div>
                      <div class="content">
                        <div class="main">
                          <h4 class="text-center">Info</h4>
                        </div>
                      </div>
                      <div class="footer">
                        <button class="btn btn-simple">
                                                Back  
                                            </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end inner -->
    </section>
  </body>

</html>

回答1:

You can use CSS :nth-child()

span {
  float: left;
  color: white;
  text-align: center;
  margin-top: 5px;
  width: calc(33% - 60px);
}

span:nth-child(3n+1) {
  background-color: green;
  margin-left: 20px;
}
span:nth-child(3n+2) {
  background-color: red;
  margin-left: 40px;
}
span:nth-child(3n+3) {
  background-color: blue;
  margin-left: 60px;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>



回答2:

Yes, you probably can.

Try this:

.yourclass:nth-child(3n+1){
  //child 1, 4, 7....
  margin-left:10px;
}
.yourclass:nth-child(3n+2){
   //child 2,5,8....
   margin-left:20px;
 }
.yourclass:nth-child(3n+3){
    //child 3,6,9....
    margin-left:30px;
 }


回答3:

Assuming you have the following HTML and CSS you will obtain what you want:

/* Global Setting for columns */
.col {
    float: left;
    text-align: center;
}

/* Different margin for columns. */
.col:nth-child(3n-2) {
	background-color: red;
    clear: left;

    border: 1px solid #000;
    margin: 0 7.5px;
    width: calc(33.33333333% - 2px - 15px); /* size + border + margin */
}
.col:nth-child(3n-1) {
	background-color: green;

    border: 1px solid #000;
    margin: 0 15px;
    width: calc(33.33333333% - 2px - 30px); /* size + border + margin */
}
.col:nth-child(3n) {
	background-color: blue;

    border: 1px solid #000;
    border-left: 0;
    border-right: 0;
    width: 33.33333333%; /* Only size */
}
<div class="container">
	<div class="row">
		<div class="col">1</div>
		<div class="col">2</div>
		<div class="col">3<br>3</div>
		<div class="col">1</div>
		<div class="col">2<br>2</div>
		<div class="col">3</div>
		<div class="col">1<br>1</div>
		<div class="col">2</div>
		<div class="col">3</div>
		<div class="col">1</div>
		<div class="col">2</div>
		<div class="col">3</div>
	</div>
</div>



标签： html css css3 css-selectors css-transitions
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~