CSS : first-child / last-child 사용해보기

혜닝혜루 2022. 11. 29. 17:31

728x90

내가 만들고 싶은 게시판 이미지 이다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    .tapInner {
      width: 400px;
    }
    .btn span {
      background-color: #ddd;
      width: 120px;
      display: inline-block;
      text-align: center;
      padding: 5px;
      border-radius: 5px 5px 0 0;
      cursor: pointer;
      border: 1px solid black;
      margin-right: -6px;
    }

    .btn span:first-child{
        background-color: white;
    }
    .tab a:last-child {
      border-bottom: none;
     }

     .tab {
      border: 1px solid #000;
      
     }

     .tab a {
      display: block;
      text-decoration: none;
      color:black;
      border-bottom: 1px solid black;
      margin:5px
     }
  </style>
</head>
<body>
<div class="tapInner">

  <div class="btn">
    <span>공지사항</span>
    <span>갤러리</span>
  </div>
    <div class="tab">
      <a href="#">방탄소년단</a>
      <a href="#">뉴진스</a>
      <a href="#">아이브</a>
      <a href="#">블랙핑크</a>
      <a href="#">르세라핌</a>
    </div>
  

</div>

</body>
</html>

span태그에 색상을 주고 하나만 변경을 하고싶다. 근데 그게 첫번째 span이라면?

first-child를 사용해서 색상을 바꿔주면 변경이 된다.

게시판의 목록을 a태그로 해서 border-bottom에 선을 주었는데

맨 마지막 르세라핌 밑에는 주고싶지 않다

rast-child를 이용해서 a태그에 걸어주어 border-bottom:none을 해주면 맨 마지막 a태그만적용이 된다.

728x90