[CSS] 가상 클래스 선택자, 속성 선택자

CSS 공부를 하다가 생소한 선택자를 마주했다.

 

선택자 사이에 +를 넣는 인접 형제 선택자와 ~을 넣는 일반 형제 선택자였다.

모르는 게 있으면 그냥 넘어가질 않는 성격이라 이번에도 모르는 게 나온 김에 선택자를 전부 다시 공부했다.

 

선택자는 항상 쓰던 것만 써서 몰랐는데 생각 보다 많은 선택자가 있더라.

 

기본+복합 선택자에 이어 가상 선택자와 속성 선택자를 정리해 보았다.



패스트캠퍼스 react&redux 강의 교안을 참고했다.

 

<div>
 <ul>
  <li>지수</li>
  <li class="you">태양</li>
  <li id="me">민철</li>
  <li>영철</li>
  <li>수진</li>
 </ul>
 <div>수영</div>
 <p>태정</p>
 <span class="you">호진</span>
</div>

(가상 클래스 선택자를 설명하기 위한 예시코드)

 

1. 가상 클래스 선택자 hover

a:hover {
 color: blue;
}

선택자 요소에 마우스 커서가 올라가 있는 동안을 선택한다.

 

2. 가상 클래스 선택자 active

a:active {
 color: pink;
}

선택자 요소에 마우스를 클릭하고 있는 동안을 선택한다.

 

3. 가상 클래스 선택자 focus

input:focus {
 background-color: orange;
}

선택자 요소가 포커스되면 선택한다.

포커스된다는 것은 웹 브라우저 상에서 해당 요소가 지정되어 있는 상태를 말한다.

 

포커스는 모든 요소에 적용되지 않으므로 <lable>, <form>, <input> 등 특정 요소를 선택할 때 쓰인다.

하지만 html에서 tapindex 속성을 사용하면 본래 적용되는 특정 요소가 아니더라도 가상 클래스 선택자 focus를 사용할 수 있다.

 

---

<div class="fruits">
 <span>딸기</span>
 <span>수박</span>
 <span>참외</span>
 <p>오렌지</p>
 <h3>키위</h3>
</div>

(가상 클래스 선택자를 설명하기 위한 예시 코드)

 

4. 가상 클래스 선택자 first-child

형식: ABC:first-child

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

선택자 ABC가 형제 요소 중 첫째라면 선택한다.

위 예시에서 <span>딸기</span>을 가리킨다.

 

5. 가상 클래스 선택자 last-child

형식: ABC:last-child

.fruits h3:last-child {
 color: purple;
}

선택자 ABC가 형제 요소 중 막내라면 선택한다.

위 예시에서 <h3>키위</h3>을 가리킨다.

 

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

형식: ABC:nth-child(n)

.fruits *:nth-child(2) {
 color: green;
}

선택자 ABC가 형제 요소 중 n번째라면 선택한다.

본 코드는 전체 선택자 *를 썼으므로 fruits 클래스의 하위 요소 전체 중 n번째 해당하는 요소를 선택한다.

위 예시에서 <span>수박</span>을 가리킨다.

 

보통 nth-child 선택자는 이렇게 전체 선택자 *와 함께 묶어서 쓰는 경향이 있다.

 

n 자리에는 n+1, 2n, 2n+1, -n+3 등 다양한 표현식이 올 수 있으며,

이 때 n은 0부터 시작한다(Zero-Based Numbering).

 

7.  부정 선택자 not

형식: ABC:not(DEF)

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

선택자 DEF가 아닌 ABC 요소를 선택한다. 

위 예시에서 fruits 클래스의 하위 요소 전부(*) 중 span 태그를 갖지 않은 요소를 가리킨다.

마찬가지로 본 선택자도 전체 선택자 *와 자주 쓰이는 경향이 있다.

 

---

<input type="text" value="smc">
<input type="password" value="123">
<input type="text" value="test" disabled>

(속성 선택자를 설명하기 위한 예시 코드)

 

10. 속성 선택자 [ABC]

[disabled] {
 color: red;
}

속성 ABC를 포함한 요소를 선택한다.

위 예시에서 세번째 줄의 input 요소를 가리킨다.

 

11. 속성 선택자 [ABC="DFG"]

[type="password"] {
 color: pink;
}

속성 ABC를 포함하고 값이 DFG인 요소를 선택한다.

위 예시에서 두번째 줄의 input 요소를 가리킨다.