6. 자식 선택자
- 부모의 요소 하위의 자식요소의 스타일을 적용
body > p { color: deepskyblue; }
7. 자손 선택자
- 조상요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p { color: deepskyblue; }
한 칸 띄우면 자손임
예제코드
<!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>자식, 자손 선택자</title>
<style>
ul > a {font-size: 30px;}
ul a { color: deeppink;}
</style>
</head>
<body>
<h2>자식, 자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
</html>
8. 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
h2 + p { color: deepskyblue; }
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p { color: deeppink; }
예제코드
<!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>형제 선택자</title>
<style>
p + span { color: gold; background-color: deepskyblue; font-size: 20px;}
h3 + p { background: deeppink;}
h3 ~ p { color: grey;}
</style>
</head>
<body>
<h2>형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
</html>
10. 속성 선택자
- HTML 요소에서 src, href, style, type, id, class ..등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 많음 -> MDN 참고 ( https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors )
CSS
[src] { border: 3px solid red; }
[src='apple.png'] { width: 200px; height: 200px;}
HTML
<img src='apple.png' alt='사과이미지'>
<img src='banana.png' alt='바나나이미지'>
예제코드
<!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>속성 선택자</title>
<style>
[href] { text-decoration: none; color: palevioletred;}
.attr { background-color: gold;}
[class='attr'] { font-size: 30px;}
[title] {text-align: center;font-size: 50px;}
</style>
</head>
<body>
<h2 title="h2요소의 title 속성">속성 선택자</h2>
<p><a href="https://www.naver.com" target="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html>
11. 가상 선택자
- 클래스를 추가할 필요 없이 요소중에서 순서에 따라 원하는 요소를 선택
CSS
.deepsky {color : deepskyblue;}
HTML
<ul>
<li class='deepsky'>김사과</li>
<li>반하나</li>
<li class='deepsky'>오렌지</li>
<li>이메론</li>
</ul>
- li:first-child
li요소 중에서 첫번째에 해당하는 요소의 스타일을 적용
예) ul > li:first-child {color: deeppink; } - li:last-child
li요소 중에서 마지막에 해당하는 요소의 스타일을 적용 - li:nth-child(n)
li요소 중에서 n번째 요소의 스타일을 적용 - li:nth-child(odd)
li요소 중에서 홀수번째 요소의 스타일을 적용 - li:nth-child(even)
li요소 중에서 짝수번째 요소의 스타일을 적용
12. 스타일링 링크
- a:link
하이퍼링크가 연결되었을 때 선택 - a:visited
특정 하이퍼링크를 방문한적이 있을 때 선택 - a:hover
특정 요소에 마우스를 올렸을 때 선택 - a:active
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
예제코드
<!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>가상 선택자</title>
<style>
.list > li:first-child {color: deeppink;}
.list > li:nth-child(2) {color: gold;}
.list > li:nth-child(odd) { background-color: greenyellow;}
.list > li:nth-child(even) { background-color: black;}
.list > li:last-child { color: gainsboro;}
a:link { color: greenyellow; text-decoration: none; }
a:visited { color: deepskyblue; text-decoration: none;}
a:hover {text-decoration: underline;}
a:active { color: red; text-decoration: underline;}
</style>
</head>
<body>
<h2>가상 선택자와 링크 스타일링</h2>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
<p><a href="https://python.org">파이썬 공식 홈페이지</a></p>
</body>
</html>
'KDT 수업 > HTML | CSS' 카테고리의 다른 글
| [CSS] CSS의 텍스트(text) (0) | 2023.03.30 |
|---|---|
| [CSS] CSS의 색상(color) (0) | 2023.03.30 |
| [CSS]선택자의 종류1 (0) | 2023.03.30 |
| [CSS]CSS란? (0) | 2023.03.29 |
| [HTML] day2: 하이퍼링크/책갈피 (0) | 2023.03.24 |