css 기초3 가상 클래스 hover,active,nth-child 등

# 가상 클래스

 

1.HOVER

ABC:hover

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

좀 더 쉽게 표현하자면, ABC요소에 대해서는 마우스 오버가 되어있는 동안에는 작동된다.

 

예시

a:hover

---

2.ACTIVE

ABC:active

선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

hover와 다른점은 마우스 오버가 아닌 ‘클릭’이라는 점이다.

 

예시

a:active

---

3.FOCUS

ABC:focus

선택자 ABC 요소가 포커스 되면 선택

이것도 기본 기능은 active와 동일하다. 차이점은

input의 경우 정보 입력을 위해 마련된 공간안에서 쓰인다는 점 같고

active의 경우는 하이퍼링크 같은 원리로 작용하는 것 같다.

다시 말해서 focus는 활용이 가능한 요소인 input등에서만 적용된다.

 

예시

input:focus

---

4.FIRST CHILD

ABC:first-child

선택자 ABC가 형제 요소 중 첫째를 선택

 

예시

.fruits span:first-child {

color: red;

}

 

<div class=‘fruits’>

<span>1</span>

<span>2</span>

<div>3</div>

<p>4</p>

<h3>5</h3>

 

</div>

 

이럴 경우에는 fruits 클래스에 속한 자식 태그 중

span 태그 중

첫번째 자식이니깐 1에 적용된다.

---

5.LAST CHILD

FIRST CHILD의 원리와 같다.

---

6.NTH CHILD

개념적으론 FIRST, LAST CHILD와 동일하다.

 

예시

.fruits *:nth-child(2)

 

<div class=‘fruits’>

<span>1</span>

<span>2</span>

<div>3</div>

<p>4</p>

<h3>5</h3>

 

</div>

 

이렇게 되면 fruits 클래스에 해당하는

*로 인해서 태그에 상관없이

2번째 자식이니깐

2번에 css가 적용된다.

---

7.NTH CHILD 2

이 개념은 흥미롭다.

 

예시

.fruits *:nth-child(2n)

 

<div class=‘fruits’>

<span>1</span>

<span>2</span>

<div>3</div>

<p>4</p>

<h3>5</h3>

 

</div>

 

이렇게 될때, 나머지 설명은 NTH CHILD와 동일하지만

2n에 대해서 설명하자면

n에 대해서는 0부터 1,2,3,4,5이렇게 늘어난다.

즉, 2n은 2의 배수에 해당하는 자리의 자녀수에 모두 해당이 되는것이므로

예시를 통해서 css 가 적용 되는 것은 2와 4이다.

---

8.NTH CHILD 3

 

CSS는 자유도가 굉장히 높은 것 같다.

 

예시

.fruits *:nth-child(2n+1)

 

<div class=‘fruits’>

<span>1</span>

<span>2</span>

<div>3</div>

<p>4</p>

<h3>5</h3>

 

</div>

 

이렇게 되면 나머지 설명은 NTH CHILD 2와 같으며

2*0+1 즉, 1부터 3,5,7,9 이런식으로 2의 배수를 0배부터 시작하여

1씩 더해준 위치에 해당되는 것에 적용된다.