CSS - 구조선택자
- 각종정보모음/컴퓨터
- 2020. 3. 20.
| 형태 | 설명 |
| :first-child | 형제관계에서 첫번째 등장하는 태그선택 |
| :last-child | 형제관계에서 마지막으로 등장하는 태그선택 |
| :nth-child(수열) | 형제관계에서 앞에서 수열번째로 등장하는 태그선택 |
| :nth-last-child(수열) | 형제관계에서 뒤에서 수열 번째로 등장하는 태그 선택 |
/****nth-child(수열) 앞에서부터 센다
nth-last-child(수열) 뒤에서부터 센다 이 두요소는 특정 순서에 있는 요소를 선택할때 사용하는 선택****/
구조선택자를 사용해 홀수와 짝수 위치를 판별하고 스타일을 적용한다. 처음 태그와 마지막 태그에는
둥근 마지막 태그에는 둥근 테두리가 적용되고, 홀수와 짝수 번째에는 각각 다른 색상의 스타일이 적용됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {overflow: hidden;}
li{
list-style: none;
float: left; padding: 15px;
}
li:first-child{border-radius: 10px 0 0 10px; }
li:last-child{border-radius:0 10px 10px 0;}
li:nth-child(2n) {background-color:#FF0003;}
li:nth-child(2n+1) {background-color:#800000;}
</style>
</head>
<body>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
<li>다섯번째</li>
<li>여섯번째</li>
<li>일곱번째</li>
</ul>
</body>
</html>
'각종정보모음 > 컴퓨터' 카테고리의 다른 글
| 노트북 배터리 오래쓰는법 몇가지 꿀팁:) (16) | 2020.07.11 |
|---|---|
| CSS - 색상단위(RGB색상,RGBA색상,HEX코드) (7) | 2020.03.21 |
| CSS - 크기단위 (%,em,px 백분율단위,배수단위,픽셀단위) (10) | 2020.03.20 |
| CSS - 상태선택자 (16) | 2020.03.20 |
| CSS - 반응선택자 (7) | 2020.03.20 |
| CS Position 속성 활용팁 (margin과 absoulte 활용) (14) | 2020.03.18 |