CSS #2 -가상클래스 선택자-

1. 가상클래스 선택자(hover,active, focus)

1. hover, active, focus

가상 선택자의 경우 오른쪽에 ":"이 붙는 경우가 많다.
💥선택자보다는 이벤트에 더 가깝다.

- hover

E에 마우스(포인터)가 올라가 있는 동안에만 E선택

<a href="https://google.com">Google!</a>
<div class="box">box</div>

a:hover{
font-weight:bold;
font-size:20px;
}
.box{
width:100px;
height:100px;
background:tomato;
transition:0.4s;}
.box:hover{
width:200px;
}

위에서 살펴보면 hover라는 가상클래스를 통해서 이 요소가 마우스를 올렸을 때 어떻게 변할지 결정할 수 있다.
💡transition이라는 태그는 애니메이션 변화에 대해서 변화시키는 명령어이다.

- active

E를 마우스로 클릭하는 동안에만 E선택

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

.box{
width:100px;
height:100px;
transition:0.4s;
}

.box active{
width:200px;
background:yellowgreen;
}

마우스 오버를 하는 경우에는 변화는 없다 이것은 hover이다.
여기서는 요소를 클릭하는 경우 어떻게 변화할지에 대한 가상클래스이다.

- focus

E가 포커스 된 동안에만E선택, 대화형 콘텐츠에서 사용가능

<input type="text">

input{
width:100px;
outline:none;
border: 1px solid lightgray;
padding: 5px 10px;
transition:0.4s
}

input:focus{
border-color:red;
width:200px;
}

---

2.가상클래스 선택자(First-Child, Last-Child)

- first-child

E가 형제 요소 중 첫번째 요소라면 선택

<ul class="fruit">
   <li>딸기</li> <!--선택-->
	<li>사과</li>
	<li>오렌지</li>
	<li>망고</li>
</ul>

.fruit li:first-child{
color:red;
}

.fruit li에서 띄어쓰기가 되어있는데 "띄어쓰기"의 의미는 후손선택자이다.
여기서 first-child 즉 "첫번째 자손을 찾아라"라는 명령어가 되는 것이다.

- Last-child

E가 형제 요소 중 마지막 요소라면 선택

<ul class="fruit">
  <li>딸기</li> 
	<li>사과</li>
	<li>오렌지</li>
	<li>망고</li> <!--선택-->
</ul>

.fruit li:last-child{
color:red;
}

first-child의 경우 후손 중에서 첫번째를 선택하는 것이지만
여기서는 last child인 만큼 마지막 후손을 찾으라는 뜻이다.

---

3.가상클래스 선택자(nth-child)

E가 형제 요소 중 n번째 요소라면 선택(N키워드 사용시 0부터 해석(Zero-base)이라고 생각하자. 자바스크립트에서 많이 볼 것이다.)

<ul class="fruit">
  <li>딸기</li> 
	<li>사과</li> <!--선택-->
	<li>오렌지</li>
	<li>망고</li>
</ul>

.fruit li:nth-child(2){
color:red;
}

<ul class="fruit">
  <li>딸기</li> 
	<li>사과</li> <!--선택-->
	<li>오렌지</li>
	<li>망고</li> <!--선택-->
</ul>

.fruit li:nth-child(2n){
color:red;
}

CSS의 예제를 본다면 2와 2n이 서로 다르다. 사용법은 예제를 보면서 이해하자면 '짝수'번째 요소들만 선택할 수 있는 것이다.

<ul class="fruit">
   <li>딸기</li> 
	<li>사과</li>
	<li>오렌지</li> <!--선택-->
	<li>망고</li> <!--선택-->
</ul>

.fruit li:nth-child(n+3){
color:red;
}

3번째 요소부터 이후 요소들을 선택한다는 뜻이 된다.

---

4.가상클래스 선택자(xxx-child 주의사항)

<!--선택된 요소가 없음-->
<div class="fruit">
  <div>딸기</div> 
	<p>사과</p>
	<p>오렌지</p>
	<span>망고</span>
</div>

.fruit p:nth-child(1){
color:red;
}

1) .fruit의 첫번째 자식 요소가<p></p>가 아니기 때문에 선택되지 않습니다.
tip. 왼쪽에서 오른쪽으로 해석보다는 오른쪽에서 왼쪽으로의 해석이 조금 더 정확하다.
2)

---

5.가상클래스 선택자(nth-of-type, not)

- nth-of-type

E의 타입(태그이름)과 동일한 타입인 형제 요소 중E가N번째 요소라면 선택(N키워드 사용시 0부터 해석(zero base))

<div class="fruit">
 <div>딸기</div> 
	<p>사과</p> <!--선택-->
	<p>망고</p>
	<span>오렌지</span>
</div>

.fruit {
font-size:40px;
}

.fruit p:nth-of-type(1){
color:red;
}

type이라는 것은 태그를 의미하는 것이고 "p태그들 중에서 첫번째 것이다"라는 개념으로 사용할 수 있다.

<ul class="fruit">
   <li>오렌지</div> 
	<li class="red">딸기</li> <!--선택-->
	<li>망고</li>
	<li class="red">사과</li>
</ul>

.fruit {
font-size:40px;
} 

.fruit .red:nth-of-type(1){
color:red;
}

위의 경우 nth-of-type이용 시 주의할 것이 type은 태그를 나타내기 때문에 red라는 클래스를 선택하지 않기 때문이다.

- 부정선택자

S가 아닌E를 선택

<ul class="fruit">
    <li>오렌지</div> 
	<li class="strawberry">딸기</li> <!--선택-->
	<li>망고</li>
	<li>사과</li>
</ul>

.fruit {
font-size:40px;
} 

.fruit li:not(.strawberry){
color:red;
}

딸기 부분을 제외한 나머지 글자를 빨간색으로 만들고 싶은 경우.
위와 같은 예제를 통해서 부정선택자를 사용할 수 있다.

---

마지막으로

다음 시간에는 가상요소 선택자, 속성선택자, 상속, 우선순위에 대해서 알아보도록 할게요😁