컴퓨터 정보/html.css.js 기초
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