[날마다 3분 CSS] CSS 선택자 #가상클래스 선택자

시작

가상(Pseudo) 클래스는 클래스, 또는 태그명 선택자 뒤에 콜론(:) 을 붙여서 표시하는 특별한 요소의 상태, 또는 요소의 순서를 기준으로 자식 요소를 선택하는 방법을 기술한 것이다 또한,  가상 클래스 선택자는 실제로 Html에 존재하지 않는 클래스지만 마치 클래스를 놓은것 처럼 작동한다고 하여 가상 클래스 선택자라고 부른다.

 

자주 사용하는 가상 클래스 선택자의 종류

---

:hover

마우스의 포인트가 올라간 HTML요소에 대한 상태를 정의한다.

 

p:hover, a:hover, .class:hover 과같이 선택자 뒤에 :hover을 붙여 사용한다.

아래 예시에서 a태그 요소에 마우스를 올리면 글자 색깔이 빨간색으로 바뀌게 된다.

💫예시

a:hover {
  color: red;
}

 

---

:active

active 가상클래스 앞에 쓰여진 HTML 태그를 클릭하고 있는 동안 상태를 정의한다.

 

ex)  a:active, button:active 아래 예시에서 a 태그 요소를 마우스가 클릭하고 있는 동안 글자색깔이 오렌지색으로 바뀌게 된다.마우스 클릭을 때면 다시 처음 상태로 변한다.

💫예시

a:active {
  color: orange;
}

 

---

:focus

focus 요소 앞에 선택된 요소가 포커스된 상태를 정의한다.

input 요소에 사용된다.

 

아래 예시에서 선택된 input요소에 마우스클릭이나 탭키를 통해 활성화가 되면 배경 색상이 빨간색이된다.

💫예시

input:focus {
	background-color: red;
}

 

---

:first-child  / :last-child

부모 요소의 첫 번째 자식과 마지막 요소를 선택한다.

 

아래 예시에서 .fruits클래스가 먼저 선택되고 그다음 선택자로 span:first-child 이므로

fruits의 자식요소인 span중에 첫번재 요소를 선택한다.

그래서 딸기가 적혀있는 span 태그 부분의 요소가 빨간색으로 변하게된다.

 

마찬가지로 :last-child도 사용할 수 있다.
밑의 main.css에서 first-child를 last-child로 바꾸면 
.fruits 자손인 span태그중 마지막 요소인 수박이 선택되어 글자색이 빨간색으로 바뀌게된다

💫예시

// index.html
<div class="fruits">
  <span>딸기</span> <!-- 선택 -->
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

//main.css

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

 

---

 

:nth-child(n)

선택한 부모 요소의 자식 요소들 중 n번째 오는 자식 요소들을 선택합니다.

자식 요소들의 나오는 순서를 기준으로 선택을 하며, n에는 간단한 연산식을 적용해 선택하는 요소를 필터링할 수 있습니다. n은 서수 값으로 1에서 시작합니다.

 

연산식을 사용할 수 있으므로 변수를 사용할 수 있으며, "2n+1"과 같이 변수를 조합해 수식을 사용할 수 있습니다. 이때 수식에 사용한 변수에 대입하는 값은 0에서 시작하는 정수입니다.

최종적으로 적용되는 값과 변수를 사용할 때 변수에 적용하는 값이 다른 점에 주의해야 합니다. 최종 값은 서수이므로 1에서 시작하지만, 수식으로 변수를 사용할 경우 변수에 대입되는 시작 값은 0에서 부터입니다.

아래 예시에서 span태그의 두번째 요소인 수박의 글자가 빨간색으로 적용됩니다

💫예시

// index.html
<div class="fruits">
  <span>딸기</span>
  <span>수박</span>  <!-- 선택 -->
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

//main.css

.fruits span:nth-child(2){
	color: red;
}

아래코드처럼 적용해서 사용할 수 도있는데 .fruits 클래스 자식클래스중 * 모든 클래스에서  n은 0부터 시작하므로

1, 3, 5 번째인 딸기, 오렌지, 사과 요소의 글자가 빨간색이 됩니다. 

// index.html
<div class="fruits">
  <span>딸기</span>	<!-- 선택 -->
  <span>수박</span>
  <div>오렌지</div>	<!-- 선택 -->
  <p>망고</p>
  <h3>사과</h3>		<!-- 선택 -->
</div>

//main.css

.fruits *:nth-child(2n+1){
	color: red;
}

 

---

:not

태그, 또는 클래스 이름을 사용할 수 있습니다.

부모 요소의 자식 요소들 중 :not의 앞에 있는 태그가 아닌 태그, 또는 클래스가 아닌 요소를 모두 선택합니다. 필요 없는 요소(들)을 제외하고 나머지 모든 자식 요소들을 선택해야 할 때 사용할 수 있습니다.

 

아래예제는  .fruits 클래스 자식클래스중 * 모든 클래스에서 (span) 태그가 아닌 요소들을 모두

선택하여 글자색을 빨간색으로 적용합니다.

💫예시

// index.html
<div class="fruits">
  <span>딸기</span>	
  <span>수박</span>
  <div>오렌지</div>	<!-- 선택 -->
  <p>망고</p>			<!-- 선택 -->
  <h3>사과</h3>		<!-- 선택 -->
</div>

//main.css

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