728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* div {
background-color: cadetblue;
} */
/* div:hover {
background-color: aqua;
} */
body > div > a:nth-child(odd) {
/*
odd : 홀수번째 모두 선택
even : 짝수번째 모두 선택
*/
color: gold;
}
body > label:hover {
color: cornflowerblue;
}
/* body 자식 태그 중, agree 라는 클래스를 가지는 요소의 자식 중 input 테그인데, type속성이 checkbox 인거 그리고 그 체크박스가 체크가 되어있을 때, 그 인접 선택자 중 warning 이라는 클래스 속성을 가지는 요소에 적용해라 */
body > .agree > input[type=checkbox]:checked ~ .warning {
/*
display : none 과 다름
눈에만 안보이게 하고 공간은 여전히 차지하게 하세요.
*/
visibility: hidden;
}
/* body 안에 div의 자식에서 a테그 중, 첫번째 자식 요소(첫번째 a태그) 를 선택 */
body > div > a:first-child {
color: cadetblue;
}
/* body 안에 div의 자식에서 a테그 중, 세번째 자식 요소(두번째 a태그 > br도 포함해야됨) 를 선택 */
body > div > a:nth-child(3) {
color: dodgerblue;
}
body > div > a:last-child {
color: red;
}
/* div의 자식 중, 홀수 번째 요소중에서 첫번째와 마지막 요소를 제외한 요소에 적용시켜주세요. */
body > div > a:nth-child(odd):not(:first-child):not(:last-child):hover{
color: lightpink;
font-size: 40px;
text-decoration: dashed;
}
</style>
</head>
<body>
<label class="agree">
<input type="checkbox">
<span>위 약관을 읽어보았고 동의합니다.</span><br>
<span class="warning">위 약관을 읽고 동의해 주세요.</span>
</label>
<div>
<a>HELLO</a><br>
<a>HELLO</a><br>
<a>HELLO</a><br>
<a>HELLO</a><br>
<a>HELLO</a><br>
<a>HELLO</a>
</div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| 가상선택자3 (0) | 2022.12.29 |
|---|---|
| 가상선택자2 (0) | 2022.12.29 |
| 그라데이션 응용 (0) | 2022.12.29 |
| radial그라데이션 (0) | 2022.12.29 |
| linear그라데이션 (0) | 2022.12.29 |