HTML
HTML 구조 선택자
기련이
2020. 5. 14. 16:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구조 선택자</title>
<style type="text/css">
ul {
overflow: hidden; /*넘치면 숨긴다는 속성*/
}
li {
color: black;
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;
}
li:hover {
color: white;
cursor: pointer;/*커서 올렸을떄 손까락모양 나오는 속성*/
}
</style>
</head>
<body>
<!-- 구조 선택자
특정한 위치에 있는 태그를 선택할 때 사용.
:first-child : 첫번째 자손
:last-child : 마지막 자손
:nth-child(수열):
-->
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</body>
</html>[ li ] 에 [ float: left; ]를 넣어줘서 목록형태가 왼쪽부터 정렬됨
li:first-child {
border-radius: 10px 0 0 10px;
}
li:last-child {
border-radius: 0 10px 10px 0; -- 블럭을 둥글게 깎아준 코드
cursor: pointer; -- 커서 올렸을떄 손까락모양 나오는 속성
- 구조 선택자
특정한 위치에 있는 태그를 선택할 때 사용.
:first-child : 첫번째 자손
:last-child : 마지막 자손
:nth-child(수열):