[CSS] 선택자

CSS 선택자란?

---

"특정한 HTML 태그 선택시 사용한다"

 

원하는 태그에 스타일 또는 스크립트를 적용하고 싶을 때 사용한다. 

일반적인 형태는 선택자 { CSS 코드 } 이다. 

다양한 선택자가 존재하지만 그 중에서 가장 중요하고 자주 사용하는 개념은 "클래스,ID 선택자" 이다. 

클래스 선택자

---

태그에 클래스를 지정할 수 있는데, 그 클래스를 가리키고 싶을 때 사용하는 선택자이다. 

 

참고) 클래스는 중복이 가능하다. 보통, 태그와 클래스 선택자를 중복으로 적용하여 자세하게 가리킬 수 있다.

ex) li.class { CSS 코드 }

ID 선택자

---

태그에 ID를 지정할 수 있는데, 그 ID 값을 가지고 있는 태그를 가리키고 싶을 때 사용하는 선택자이다.

참고) ID는 클래스와 다르게 중복으로 사용해서는 안된다. 왜냐하면 자바 스크립트에서 문제가 발생하기 때문이다.

속성 선택자

---

특정 속성과 값을 가지는 태그를 선택할 때 사용한다. 

기본적인 형태는 선택자[속성], 선택자[속성 = 값] 이며, 주로 Input 태그에서 많이 사용하게 된다. 

 

후손?, 자손? 그리고 선택자

---

후손과 자손의 차이점

그림에서 div의 자손이란 h1,h2,ul을 의미하며, div의 후손은 자손을 포함하여 li,li,li를 뜻한다.

즉, 자손은 자식 노드들을 의미하며 후손은 부모의 높이보다 낮은 모든 노드들을 의미한다. 

 

(1) 후손 선택자 : 특정한 태그의 후손을 선택할 때 사용한다. 

#header li { color : red; }

 

(2) 자손 선택자 : 특정한 태그의 자손을 선택할 때 사용한다.

#header > ul {color : red;}

 

참고) table 태그에서는 자손 선택자가 아닌 후손 선택자를 사용하는 것이 낫다.

일반적으로 table > tr > th { color : red; } 이런식으로 지정을 해줄텐데, 막상 이런식으로 지정을 한다면 적용이 되지 않는다. 왜냐하면 table와 tr 사이에 tbody라는 table의 자손이 존재하기 때문이다. 

그렇기에 굳이, 자손 선택자를 사용한다면 table > tbody > tr > th 순으로 지정하면 적용이 되는 것을 확인할 수 있다.

 

상태, 반응 선택자

---

(1) 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택할 때 사용된다. 

일반적인 모양은 선택자 : 상태 { } 이다.

상태에는 hover(커서를 올렸을 때)와 active(클릭했을 때)가 존재한다.

 

(2) 상태 선택자 : 입력양식의 특정한 상태를 선택할 때 사용된다. 

일반적인 모양은 반응 선택자와 같으며 상태에는 checked,foucs,enabled,disabled가 존재한다.  

 

구조 선택자

---

특정한 위치의 태그를 선택할 때 사용된다. 

fisrt-child : 형제 중에서 첫번째 형제를 선택한다. 

last-child : 형제 중에서 마지막 형제를 선택한다.

nth-child(수열식) : 형제 중에서 수열식에 해당하는 형제를 선택한다.

nth-last-child(수열식) : nth-child와 기능은 똑같으나 뒤에서부터 수열식을 적용한다.

 

여기에서 형제란, 후손의 조직을 나타낸 트리에서 부모가 같고, 자신과 같은 레벨을 가진 태그들의 집합이라고 생각하면 된다.

 

만약 이런식으로 적용하면 어떻게 될까? 

ul의 자식이면서 li와 같은 레벨의 자식들의 집합중에서 2n+1의 수열에 해당되는 순서를 가진 태그의 색을 red로 바꾸어라 라는 의미이다.

2n+1은 단순히, 수열식이며 n에다가 0부터 값을 넣어보면 

1,3,5,7...... 2n+1 이런식으로 값이 진행된다. 

즉, 1,3,5,7...번째 태그만 css의 효과를 받게 되는 것이다.