1. 연결 선택자
- 하위 요소 : 특정 요소를 기준으로 그 안에 포함된 요소
- 자식 요소 : 현재 요소를 기준으로 바로 한 단계 아래 요소
- 손자 요소 : 자식 요소의 한 단계 아래 요소
- 형제 관계 : 부모 요소가 같을 경우를 말한다.
- 형 요소 : 형제 관계인 요소에서 먼저 나오는 요소
- 동생 요소 : 형제 관계인 요소에서 나중에 나오는 요소
1) 하위 선택자
-
하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택한다.
-> 자식 요소뿐만 아니라 손자요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.
-
하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다.
상위요소 하위요소 { 스타일 규칙... }<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section p { color: blue;} /*section의 모든 하위 p 요소를 파란색 글자로 지정 */
</style>
</head>
<body>
<section>
<h1> 하위 선택자 </h1>
<p> 부모 요소에 포함된 하위 요소를 모두 선택한다.</p>
<div>
<p> 자식 요소뿐만 아니라 손자 요소, 손자의 손자요소 등 모든 하위 요소까지 적용된다. </p>
<p> 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다. </p>
</div>
<!-- section의 모든 하위 (자식, 손자) p요소에 적용된다. -->
</section>
</body>2) 자식 선택자
-
자식 요소에만 스타일을 적용하는 선택자이다.
-
두 요소 사이에 > 기호를 표시하여 부모 요소와 자식 요소를 구분한다.
부모 요소 > 자식요소 { 스타일 규칙... }<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section > p { color: blue;} /*section 요소의 자식인 p 요소를 파란색 글자로 지정 */
</style>
</head>
<body>
<section>
<h1> 자식 선택자 </h1>
<p> 자식 요소에만 스타일을 적용하는 선택자이다.</p>
<!-- section의 자식인 p요소에만 적용된다. -->
<div>
<p> 두 요소 사이에 > 기호를 표시하여 부모 요소와 자식 요소를 구분한다. </p>
<p> 하위 선택자는 자식, 손자 요소까지 적용되지만, 자식 선택자에서는 자식 요소 (바로 한 단계 아래의 요소) 에만 적용된다. </p>
</div>
</section>
</body>3) 인접 형제 선택자
-
형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 말한다.
-
요소1과 요소2 사이에 + 기호를 표시한다.
- 요소1과 요소2는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소2를 선택한다.
요소1 + 요소2 { 스타일 규칙... }4) 형제 선택자
-
모든 형제 요소에 적용된다.
-
요소1과 요소2 사이에 ~ 기호를 표시한다.
요소1 ~ 요소2 { 스타일 규칙... }2. 속성 선택자
- 속성값에 따라 원하는 요소를 선택할 수 있다.
1) [속성] 선택자
- 대괄호 [ ] 사이에 원하는 속성을 입력한다.
a[ 찾으려고 하는 속성 이름 ] {...}2) [속성 = 속성값] 선택자
- 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용한다.
3) [속성 ~= 값] 선택자
- 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다.
- 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리하다.
[class ~= button]{...}class값 중에 button이 있는 요소를 찾는다.
-> button 값과 정확하게 일치하는 요소를 선택하며 다른 글자가 속성값에 포함되어 있으면 선택하지 않는다.
4) [속성|= 값] 선택자
-
특정 속성값이 포함된 속성에 스타일을 적용한다. (속성값이 한 단어로 일치하여야 한다.)
-
지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 - 으로 연결된 단어도 선택한다.
5) [속성 ^= 값] 선택자
- 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을 때 사용한다.
6) [속성 $= 값] 선택자
- 지정한 속성값으로 끝나는 요소를 선택한다.
7) [속성 *= 값] 선택자
- 속성값의 위치에 관계 이 지정한 속성값이 포함되어 있다면 해당 소를 선택한다.
3. 가상 클래스와 가상 요소
1) 가상 클래스
- 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 사용한다.
| 종류 | 설명 |
|---|---|
| :link | 방문하지 않은 링크에 스타일을 적용한다. |
| :visited | 방문했던 링크에 스타일을 적용한다. |
| :hover | 지정한 요소에 마우스 포인터를 올려놓을 때 스타일을 적용한다. |
| :active | 지정한 요소를 활성화했을 때 스타일을 적용한다. |
| :focus | 지정한 요소에 초점이 맞춰졌을 때 스타일을 적용한다. |
| :target | 앵커 대상에 스타일을 적용한다. |
| :enabled | 지정한 요소를 사용할 수 있는 상태일 때 스타일을 적용한다. |
| :disabled | 지정한 요소를 사용할 수 없는 상태일 때 스타일을 적용한다. |
| :checked | 선택한 요소의 스타일을 적용한다. |
| :not | 지정한 요소가 아닐 때 선택해서 스타일을 적용한다. |
2) 구조 가상 클래스
- 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용한다.
| 종류 | 설명 |
|---|---|
| :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-type(n) | 부모 안에 있는 A요소 중에서 n번째 요소를 선택한다. |
| A:nth-last-of-type(n) | 부모 안에 있는 A요소 중에서 끝에서 n번째 요소를 선택한다. |
3) 가상 요소
-
문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.
-
특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위한 것이다.
-
가상 요소는 가상 클래스와 구별되도록 가상 요소 이름 앞에 ;; 를 붙여 사용한다.
| 종류 | 설명 |
|---|---|
| ;;first-line | 첫 번째 줄을 선택한다. |
| ;;first-letter | 줄에서 첫 번째 글자를 선택한다. |
| ;;before | 특정 요소의 앞에 내용이나 스타일을 추가한다. |
| ;;after | 특정 요소의 뒤에 내용이나 스타일을 추가한다. |
