css battle 250908

📌 사이트

https://cssbattle.dev/

 

📌 이미지

 

구현

- .container > .col:first-child 선택자를 통해 container 내부의 첫번째 col 만 특정하기,

- .col > .block:not(:last-child) 선택자를 통해 col 내부의 block 중에서 마지막이 아닌 block 만 특정하기

 

코드

<div class="container">
  <div class="col">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="col">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>
<style>
  body {
    background: #FAE29E;
  }
  .container {
    display: flex;
  }
  .container > .col:first-child {
    padding-top: 92px;
  }
  .container > .col:last-child {
    padding-top: 32px;
  }
  .col {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .col > .block:not(:last-child) {
    margin-top: 30px;
  }
  .col > .block:first-child {
    margin-top: 60px;
  }
  .block {
    width: 30px;
    height: 100px;
    background: #4A9A86;
  }
</style>