CSS 가상클래스 (3)_순서 가상클래스[2] (first-child, last-child)

저번시간에 이어서 순서부여 가상클래스!

순서부여 가상클래스는html에 따로 클래스를 부여하지 않아도

원하는 요소 접근할 수 있도록 하기 위해서 사용한다.

 

first-child

해당 선택자의 가장 첫 번째 요소

 

last-child

해당 선택자의 가장 마지막 요소

 

당연하지만 nth-child와 달리 순서를 뜻하는 숫자는 필요하지 않다.

 

 

예시

<div class="tab-inner">
    <div class="btn">
        <span>공지사항</span>
        <span>갤러리</span>
    </div>
    <div class="tab">
        <a href="#none">2022 신년인사</a>
        <a href="#none">수강신청 방법 안내</a>
        <a href="#none">장학금 신청기간 안내</a>
        <a href="#none">복학 신청 안내</a>
        <a href="#none">동계 방학 기간중 도서관 운영 안내</a>
    </div>
</div>

 

전체 CSS코드

.tab-inner {
    width: 400px;
}
.btn span {
    background-color: #ccc;
    display: inline-block;
    width: 120px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    border: 2px solid #000;
    margin-right: -7px;
}
.btn span:first-child {
    background-color: #fff;
    border-bottom: 2px solid #fff;
    margin-left: 10px;
    margin-bottom: -4px;
}
.btn span:last-child {
    border-bottom: 0px solid #fff;
}
.tab {
    border: 2px solid #000;
}
.tab a{
    display: block;
    text-decoration: none;
    color: #000;
    border-bottom: 2px solid #000;
    padding: 2px;
    margin: 3px 10px 3px 10px;
    transition: 0.4s;
}
.tab a:last-child{
    border-bottom: 0;
}
.tab a:hover {
    transition: 0s;
    background-color: rgba(136, 153, 247, 0.3);
}

 

first-child와 last-child를 이용하여 간단한 게시판 형태를 만들어보았다.