[CSS] CSS 선택자(2)

 

CSS선택자에 대한 두 번째 시간입니다. 

CSS 선택자

• 가상 클래스
• 가상 요소
• 속성

---

1. 가상 클래스 선택자(Pseudo-Classes) 

- A:hover : HOVER, 선택자 A요소에 마우스 커서가 올라가 있는 동안 선택.

a라는 태그에 마우스를 올리면 빨간색으로 변함.

A:hover {
	color: red;
}

---

- A:active : ACTIVE, 선택자 A요소에 마우스를 클릭하고 있는 동안 선택.

a태그 부분을 클릭하고 있는 동안에만 빨간색으로 변함.

A:active {
	color: red;
}

---

- A:focus : FOCUS, 사용자가 A요소를 클릭 또는 탭 하거나 키보드 Tab키로 선택했을 때 발동됨.

(Focus 될 수 있는 요소는 input, a, button, label, select 등의 대화형 컨탠츠가 해당된다. 이 외에 tabindex 속성을 사용한 요소도 Focus 될 수 있다.)

input요소가 활성화 되어 있는 동안에만 빨간색으로 변함.

input:focus {
	color: red;
}

---

-  A:first-child : A가 형제 요소 중 첫째라면 해당 요소 선택.

 greeting클래스의 하위요소인 p태그 중 첫 번째인 '안녕하세요' 선택.

(last-child는 마지막 요소 선택)

<div class="greeting">
	<h1>Hello</h1>
	<p>안녕하세요</p>
	<p class="red">반가워!</p>
	<span class="red">잘가!</span>
</div>

.greeting p:first-child {
	color: red;
}

---

- A:nth-child(n) : NTH CHILD, 선택자 ABC가 형제 요소 중 n 번째라면 선택.

greeting클래스의 모든 하위요소 중 세 번째 요소인 '반가워!' 선택.

<div class="greeting">
	<h1>Hello</h1>
	<p>안녕하세요</p>
	<p class="red">반가워!</p>
	<span class="red">잘가!</span>
</div>

.greeting *:nth-child(3) {
	color: red;
}

n은 0부터 시작되는 키워드.  선택되는 것은 3번째 요소 이후의 요소만 선택.

.greeting *:nth-child(n+3) {
	color: red;
}

 

---

2. 가상 요소 선택자 (Pseudo-Elements)

- A::before : BEFORE, 선택자 A 요소의 내부 중 앞쪽에 내용(Content)을 삽입.

출력되는 것은 "YES! AAAAAAA!"

(::after 는 뒤에 내용을 삽입.)

<div class="A">
	<!-- 삽입되는 구역 -->
    AAAAAAA!
</div>

.A::before {
	content: "YES!";
}

---

3. 속성 선택자 (Attribute)

- [A] : ATTR, 속성 A를 포함한 요소 선택

disabled 요소만 선택.

<input type="id" value="id12">
<input type="password" value="0000">
<input type="email" value="123@aa.com" disabled>

[disabled] {
	color: red;
}

---

- [A="XYZ"] : ATTR=VALUE, 속성 A를 포함하고 값이 XYZ인 요소 선택.

<input type="id" value="id12">
<input type="password" value="0000">
<input type="email" value="123@aa.com" disabled>

[type="email"] {
	color: red;
}

---