1. 연결 선택자
: 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자
컴비네이션 선택자(Combination selector) 또는 조합선택자라고도 한다
1) 하위 선택자
- 부모 요소에 포함된 모든 하위 요소에 스타일이 적용된다
- 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용
- 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 쓴다
기본형상위요소 하위요소
<style>
......
section p {color: blue; }
/* section(상위요소)의 모든 p(하위요소)를 파란색 글자로 지정 */
</style>
.....
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이.....</p> <!-- 자식요소 적용 -->
<div>
<p>가족실(2~4인) : 60,000원/일</p> <!-- 손자요소 적용 -->
<p>도미토리(4인 공용) : 25,000원/일</p> <!-- 손자요소 적용 -->
</div>
</section>2) 자식 선택자
- 자식 요소에 스타일을 적용하는 선택자
- 두 요소 사이에 '>(부등호)'를 표시해 부모 요소와 자식 요소를 구분
기본형부모요소 > 자식요소
<style>
......
section > p {color: blue; }
/* section(상위요소)의 바로 한 단계 아래의 요소인 자식요소만 파란색 글자로 지정 */
</style>
.....
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이.....</p> <!-- 자식요소만 적용 -->
<div>
<p>가족실(2~4인) : 60,000원/일</p> <!-- 손자요소 적용X -->
<p>도미토리(4인 공용) : 25,000원/일</p> <!-- 손자요소 적용X -->
</div>
</section>3) 인접 형제 선택자
- 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용
- 요소1과 요소2 사이에 '+'기호 사용
- 요소1과 요소2는 같은 레벨이면서 요소1 이후 첫번째 요소2에 적용
기본형요소1 + 요소2
<style>
......
h1 + p {color: blue; }
/* h1와 형제인 p 중에서 첫 번째 p요소만 선택하여 파란색 글자로 지정 */
</style>
.....
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이.....</p> <!-- 형제요소 중 첫 번째 형제인 p에 적용 -->
<div>
<p>가족실(2~4인) : 60,000원/일</p>
<p>도미토리(4인 공용) : 25,000원/일</p>
</div>
</section>4) 형제 선택자
- 형제 요소들에 스타일 적용
- 인접 형제 선택자와 다른 점은 모든 형제요소에 다 적용된다는 것
- 요소1과 요소2 사이에 기호 '~' 사용
기본형요소1 ~ 요소2
<style>
......
h1 ~ p {color: blue; }
/* h1와 형제인 p 중에서 모든 형제요소 다 파란색 글자로 지정 */
</style>
.....
<section>
<h1>예약 방법 & 사용 요금</h1>
<p>아직 온라인 예약 신청이.....</p> <!-- h1 요소의 형제인 p에 모두 적용 -->
<p>가족실(2~4인) : 60,000원/일</p> <!-- h1 요소의 형제인 p에 모두 적용 -->
<p>도미토리(4인 공용) : 25,000원/일</p> <!-- h1 요소의 형제인 p에 모두 적용 -->
</section>2. 속성 선택자
: 태그 안에서 사용하는 속성값에 따라 요소를 선택 하는 역할을 한다.
1) [속성] 선택자
- 해당 속성을 가진 요소를 찾아 스타일 적용
기본값요소[속성이름] { ...... }
<style>
......
a[href] {color: blue; }
/* href 속성이 있는 a 요소를 찾는 선택자 */
</style>
.....
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href='#'>메뉴 1</a></li> <!-- a요소 중에서 href속성값이 있는 요소만 적용 -->
<li><a href='#'>메뉴 2</a></li> <!-- a요소 중에서 href속성값이 있는 요소만 적용 -->
<li><a href='#'>메뉴 3</a></li> <!-- a요소 중에서 href속성값이 있는 요소만 적용 -->
<li><a href='#'>메뉴 4</a></li> <!-- a요소 중에서 href속성값이 있는 요소만 적용 -->
</section>2) [속성=값] 선택자
- 지정한 속성값이 있는 요소를 찾아 스타일 적용
기본값요소[속성=속성값] { ...... }
<style>
......
a[target = _blank] {color: blue; }
/* target 속성값이 _blank인 a요소를 선택하는 선택자 */
</style>
.....
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href='#' target="_blank">메뉴 1</a></li>
<!-- a요소 중에서 target 속성값이 _blank인 요소만 적용 -->
<li><a href='#'>메뉴 2</a></li>
<li><a href='#'>메뉴 3</a></li>
<li><a href='#'>메뉴 4</a></li>
</section>3) [속성~=값] 선택자
- 지정한 속성값이 포함된 요소를 찾아 스타일 적용 (단어별)
기본값[속성값 ~= 요소] { ...... }
<style>
......
[class = "button"] {color: blue; }
/* class값 중에 button이 있는 요소를 찾는 선택자 */
</style>
.....
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href='#' "flat">메뉴 1</a></li>
<li><a href='#' "flat">메뉴 2</a></li>
<li><a href='#' "button">메뉴 3</a></li> <!-- 속성값이 button인 요소만 적용 -->
<li><a href='#' "flat button">메뉴 4</a></li> <!-- 속성값으로 button을 포함한 요소도 적용 -->
</section>4) [속성|=값] 선택자
- 지정한 속성값이 포함된 요소를 찾아 스타일 적용 (하이픈 포함, 단어별)
- 하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용
기본값요소[속성|=값] { ...... }
<style>
......
a[title |= us] {color: blue; }
/* 속성값이 us이거나 us-로 시작하는 a요소를 찾는 선택자 */
</style>
.....
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href='#' title="us-english">영어</a></li> <!-- 속성값이 "us-"로 시작하므로 적용 -->
<li><a href='#' title="ja">일본어</a></li>
<li><a href='#' title="chn">중국어</a></li>
</section>5) [속성^=값] 선택자
- 지정한 속성값으로 시작하는 요소를 찾아 스타일 적용
기본값요소[ 속성 ^= 값] { ...... }
<style>
......
a[title ^= eng {color: blue; }
/* 속성값이 eng로 시작하는 a요소를 찾는 선택자 */
</style>
.....
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href='#' title="english">영어</a></li> <!-- 속성값이 eng로 시작하므로 적용 -->
<li><a href='#' title="ja">일본어</a></li>
<li><a href='#' title="chn">중국어</a></li>
</section>6) [속성 $= 값] 선택자
- 지정한 속성값으로 끝나는 요소를 찾아 스타일 적용 (확장자 주로 사용)
기본값[속성$=값] { ...... }
<style>
......
[href $= xls] {color: blue; }
/* 마지막 단어가 xls인 요소 */
</style>
.....
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href='intro.hwp'>hwp파일</a></li>
<li><a href='intro.xls'>엑셀 파일</a></li><!-- 속성값이 xls로 끝나므로 적용 -->
</section>7) [속성*=값] 선택자
- 지정한 속성값의 일부가 일치하는 요소를 찾아 스타일 적용
기본값[속성*=값]
<style>
......
a[href *= w3] {color: blue; }
/* 속성값 중 일부에 w3가 있는 a요소를 찾는 선택자 */
</style>
.....
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href="https://www.google.co.kr">구글</a></li>
<li><a href="https://www.naver.com">네이버</a></li>
<li><a href="https://www.w3.org">엑셀 파일</a></li>
<!-- href의 속성값 중에서 w3가 일치하므로 적용 -->
</section>3. 가상 클래스
: 사용자 동작에 반응하는 가상 클래스 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>link 스타일</title>
<style>
.navi a:link, .navi a:visited{
/* :link = 방문하지 않은 링크에 스타일을 적용 */
/* :visited = 방문한 링크에 스타일을 적용 */
display:block;
font-size:14px;
color:#000;
padding: 10px;
text-decoration: none;
text-align: center;
}
.navi a:hover, .navi a:focus {
/* :hover = 마우스 포인터를 올려놓으면 스타일을 적용 */
/* :focus = 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 */
background-color:#222;
color:#fff;
}
.navi a:active {
/* :active = 웹 요소에 초점이 맞추어졌을 때 스타일을 적용 */
background-color:#f00;
}
#intro:target {
/* :target : 앵커로 연결된 부분(intro)에 스타일 적용 */
background-color:#0069e0;
color:#fff;
}
#room:target {
/* :target : 앵커로 연결된 부분(room)에 스타일 적용 */
background-color:#ff9844;
}
#reservation:target{
/* :target : 앵커로 연결된 부분(reservation)에 스타일 적용 */
background-color:#fff8dc;
}
</style>
</head>
<body>
<div>
<nav class="navi">
<ul>
<li><a href="#intro">이용 안내</a></li>
<li><a href="#room">객실 소개</a></li>
<li><a href="#reservation">예약 방법 및 요금</a></li>
<li><a href="ps-2.html">예약하기</a></li>
</ul>
</nav>
<div id="intro" class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam.</p>
</div>
<div id="room" class="contents">
<h2>객실 소개</h2>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum.</p>
</div>
<div id="reservation" class="contents">
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu.</p>
</div>
</div>
</body>
</html>1) :link
: 방문하지 않은 링크에 스타일을 적용
2) :visited
: 방문했던 링크에 스타일을 적용
3) :hover
: 지정한 요소에 마우스 포인터를 올려놓을 때 스타일을 적용
4) :active
: 지정한 요소를 활성화했을 때 스타일을 적용
순서 중요
:link->:visited->:hover->:active
5) :focus
: 지정한 요소에 초점이 맞춰졌을 때 스타일을 적용
6) :target
: 앵커 대상에 스타일을 적용
<style>
#signup input:checked + label {
/* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
color:red; /* 글자색 */
font-weight:bold; /* 글자 굵게 */
}
</style>
</head>
<body>
<div class="container">
<form id="signup">
<fieldset>
<legend>객실 형태</legend>
<ul>
<li>
<input type="radio" name="room" id="basic">
<label for="basic">기본형(최대 2인)</label>
<li>
<li>
<input type="radio" name="room" id="family">
<label for="family">가족형(최대 8인)</label>
</li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
7) :enabled
: 지정한 요소를 사용할 수 있는 상태일 때 스타일을 적용
8) :disabled
: 지정한 요소를 사용할 수 없는 상태일 때 스타일을 적용
9) :checked
: 선택한 요소의 스타일을 적용
10) :not
지정한 요소가 아닐 때 선택해서 스타일을 적용
4. 구조 가상 클래스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 선택자</title>
<style>
.contents :nth-child(3) {
/* .contents의 세 번째 자식 요소에 스타일 적용 */
background-color:#ffff00;
}
.contents p:nth-of-type(3) {
/* .contents의 p 요소 중에서 세 번째 자식 요소에 스타일 적용 */
background-color:#00b900;
}
</style>
</head>
<body>
<div class="container">
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
<div class="contents">
<h2>이용 안내</h2>
<p>Excepteur do est eiusmod nulla et veniam.</p>
<p>Qui magna culpa minim reprehenderit magna in nisi ipsum.</p>
/* contents의 모든 자식 요소 중에서 3번째이므로 스타일 지정 */
<h2>객실 소개</h2>
<p>Irure incididunt duis ut cupidatat laborum adipisicing veniam irure.</p>
/* contents의 p 자식 요소 중에서 3번째이므로 스타일 지정 */
<h2>예약 방법 및 요금</h2>
<p>Fugiat aliquip mollit proident velit magna esse ea officia eu.</p>
</div>
</div>
</body>
</html>
| 종류 | 설명 |
|---|---|
| :only-child | 부모 안에 자식 요소가 하나뿐일 때 자식요소를 선택 |
| A:only-type-of | 부모 안에 A요소가 하나뿐일 때 선택 |
| :first-child | 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택 |
| :last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택 |
| A:first-of-type | 부모 안에 있는 A요소 중에서 첫 번째 요소를 선택 |
| A:last-of-type | 부모 안에 있는 A요소 중에서 마지막 요소를 선택 |
| :nth-child(n) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택 |
| :nth-last-child(n) | 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택 |
| A:nth-of-type(n) | 부모 안에 있는 A요소 중에서 n번째 요소를 선택 |
| A:nth-last-of-type(n) | 부모 안에 있는 A요소 중에서 끝에서 n번째 요소를 선택 |
늦깎이 애아빠 개발지망생