# 가상 클래스
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씩 더해준 위치에 해당되는 것에 적용된다.
'Web > Css' 카테고리의 다른 글
css 활용2 글꼴, 문자 (0) | 2022.09.05 |
---|---|
css 활용1 박스 모델 (0) | 2022.09.05 |
css 기초4 가상 요소 (0) | 2022.09.05 |
css 기초2 복합 선택자 (0) | 2022.09.05 |
css 기초1 기본 선택자 (html에 작성된 것중 어떤것에 css 속성을 입히는지) (0) | 2022.09.05 |