선택자_기본

• * : 전체 선택자
• 태그이름 : 태그 선택자
• . : 클래스(class) 선택자
• # : 아이디(id) 선택자
  

---

선택자_복합

🏷 ABCXYZ : 일치 선택자

: 선택자 ABC와 XYZ를 동시에 만족하는 요소

span.orange{
	color:red;
    }

🏷 ABC>XYZ : 자식 선택자

: 선택자 ABC의 자식 요소 XYZ 선택

span>.orange{
	color:red;
    }

🏷 ABC XYZ : 하위(후손) 선택자

: 선택자 ABC의 하위(후손) 요소 XYZ 선택

span .orange{
	color:red;
    }

🏷 ABC+XYZ : 인접형제 선택자

: ABC 다음 형제요소 XYZ 하나를 선택

span+.orange{
	color:red;
    }

🏷 ABC~XYZ : 일반형제 선택자

: 선택자 ABC 다음형제 XYZ 모두를 선택

.orange~li{
	color:red;
    }

예제🍀
해설 : .orange(ABC) 다음형제(li) 모두를 선택하므로 수박과 참외가 해당이된다.

<ul>
<li>사과</li>
<li>바나나</li>
<li class="orange";>오렌지</li>
<li>수박</li> 선택
<li>참외</li> 선택
</ul>

---

선택자_가상 클래스

🏷 ABC:hover

: ABC 요소에 마우스 커서가 올라가있는 동안 선택

a:hover{
	color:red;
	}

🏷 ABC:active

: ABC 요소에 마우스를 클릭하고 유지하는 동안 동작

a:active{
	color:red;
	}

🏷 ABC:focus

: 선택자 ABC가 포커스 되면 작동

focus가 될 수 있는 요소는 HTML 대화형 콘텐츠이거나 사용자에게 데이터를 입력받는 것이다.
ex) input, a, button, label, select 등

a:hover{
	color:red;
	}

🏷 ABC:first-child

: 선택자 ABC가 형제요소 중 첫째라면 선택

.fruits span:first-child{
	color:red;
	}

예제 1 🍀
해설 : 선택자 .fruits span의 첫째가 span이기 때문에 오렌지에 해당됩니다.

<div class="fruits">
	<span class="orange">오렌지</span> 선택
    <span class="banana">바나나</span>
    <div>딸기</div>
    <p>사과</p>
</div>

예제 2 🍀
해설 : 선택자 .fruits 첫째가 span이 아닌 div이기 때문에 해당되지 않는다.

<div class="fruits">
    <div>딸기</div>
    <p>사과</p>
    <span class="orange">오렌지</span> <---첫째가 아님
    <span class="banana">바나나</span>
</div>

🏷 ABC:last-child

: 선택자 ABC가 형제요소 중 막내라면 선택

.first span:last-child{
	color:red;
	}

🏷 ABC:nth-child(n)

: 선택자 ABC가 형제요소 중 (n)째라면 선택

.first span:nth-child(n){
	color:red;
	}

💡(n) 활용하기 - n은 0부터 대입한다

• ABC:nth-child(2n) : 짝수
• ABC:nth-child(2n+1) : 홀수
• 등등 활용가능

🏷 ABC:not(XYZ)

: 선택자 XYZ가 아닌 ABC 요소선택

.fruits *:not(span){
	color:red;
	}

예제 🍀
해설 : fruits의 전체 자식중에 span 선택자가 아닌 요소

<div class="fruits">
	<span>사과</span> not
    <span>딸기</span> not
    <div>바나나</\div> 선택
    <h3>오렌지</h3> 선택
</div>

---

선택자_가상요소

🏷 ABC::before

: 선택자 ABC 요소의 내부 앞에 내용을 삽입

.box::before{
	content:"앞!";
	}

<div class="box">
 	content!
</div>

📃 출력

style의 condtent로 지정한 앞!이 .box 앞쪽에 출력되었다.

🏷 ABC::after

: 선택자 ABC 요소의 내부 뒤에 내용을 삽입

.box::after{
	content:"뒤!";
	}

<div class="box">
 	content!
</div>

📃 출력

::before과 ::after을 사용할 때에는 content를 필수로 같이 사용해야합니다!

---

선택자_속성

🏷 [ABC]

: 속성 ABC를 포함한 요소 선택

💡 type 속성같이 일반적으로 모두 가지고 있는 흔한 속성은 적용되기 힘들다. [check], [disabled]같은 특정 속성에 적합하다.

🏷 [ABC="XYZ"]

: 속성 ABC를 포함하고 값이 XYZ인 요소 선택
ex ) [type="password", type="text" 등등]