CSS - [ 선택자 ]

선택자 { 속성: 값; }

CSS에서 중괄호 영역 앞쪽에 작성하는 부분을 HTML의 특정한 부분을 선택한다는 의미에서 선택자라고 부른다. HTML에서 선택자에 해당하는 부분에 중괄호 영억의 속성과 값들이 적용된다. 여기엔 크게 5가지 종류가 있다.

 

 

1. 기본

• 전체 선택자 : * 로 사용하며 HTML의 모든 요소를 선택한다.
• 태그 선택자 : 태그 이름에 해당하는 요소를 선택한다.
• 클래스 선택자 : HTML class 속성의 값에 해당하는 요소를 선택하며 .클래스명 과 같이 작성한다.
• 아이디 선택지 : HTML id 속성의 값에 해당하는 요소를 선택하며, #클래스명 과 같이 작성한다.

 

 

2. 복합 (기본 선택자를 조합해서 사용)

• 일치 선택자 : 두 개의 선택자를 동시에 만족하는 요소 선택.    ex) span.orange : span 태그 중 orange class를 선택
• 자식 선택자 : 선택자의 자식 요소 선택.    ex) ul > .orange : ul 태그의 자식 태그 중 orange class를 선택
• 하위 선택자 : 선택자의 하위 요소 선택. 띄어쓰기가 선택자의 기호!    ex) div .orange : div 태그의 하위 요소 중 orange class를 선택
• 인접 형제 선택자 : 선택자의 다음 형제 요소 하나를 선택.    ex) .orange + li : orange class 요소의 다음 형제 li 태그 선택
• 일반 형제 선택자 : 선택자의 다음 형제 요소 모두를 선택.    ex) .orange ~ li : orange class 요소의 다음 형제 li 태그 모두 선택

 

 

3. 가상 클래스

• hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택.    ex) a:hover : a태그에 마우스가 올라가 있는 동안 선택
• active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택.    ex) a:active : a태그에 클릭하는 동안 선택
• focus : 선택자 요소가 포커스되면 선택.    ex) input:focus : input 태그에 포커스되어 있으면 선택

---- 위에 3개는 동작을 나타내는 가상 클래스 선택자----

 

• ABC:first-child : 선택자가 형제 요소 중 첫째라면 선택.    ex) .fruits span:first-child : fruits 클래스 요소의 하위 요소 중 span 태그를 가진 첫째 요소 선택
• ABC:last-child : 선택자가 형제 요소 중 막내라면 선택.    ex) .fruits h3:last-child : fruits 클래스의 하위 요소 중 h3 태그를 가진 마지막 요소 선택
• ABC:nth-child(n) : 선택자가 형제 요소 중 (n)째라면 선택.    ex) .fruits *:nth-child(2) : fruits 클래스의 하위 요소 중 2번째 요소 선택
• ABC:not(XYZ) : 선택자 XYZ가 아닌 ABC 요소 선택.    ex) .fruits *:not(span) : fuirts 클래스의 하위 요소 중 span 태그가 아닌 요소 선택

 

 

4. 가상 요소

• ABC::before : 선택자 요소의 내부 앞에 내용을 삽입. 인라인 요소.    ex) .box::before : box 클래스 요소 내부의 가장 앞에 content에 해당하는 내용을 삽입.
• ABC::after : 선택자 요소의 내부 뒤에 내용을 삽입. 인라인 요소.     ex) .box::after : box 클래스 요소 내부의 가장 뒤에 content에 해당하는 내용을 삽입.

 

 

5. 속성

• [ABC] : 속성 ABC을 포함한 요소 선택.    ex) [disabled] : 속성이 disabled인 요소 선택
• [ABC="XYZ"] : 속성 ABC을 포함하고 값이 XYZ인 요소 선택.    ex) [type="password"] : type 속성 값이 password인 요소 선택.

 

 

---

선택자 우선순위

앞서 우리는 선택자의 개념에 대해 배웠다. 선택자에는 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 css 속성을 우선 적용할지 결정하는 우선순위가 존재한다. 점수가 높은 선언이 우선되며, 같은 점수이면 마지막에 해석된 선언이 우선된다. 아래 기준을 보고 점수 해당하는 부분의 점수를 더해서 계산하면 됨!!

 

• !important : 9999999999점 (그냥 무한대로 생각하기!)
• 인라인 선언 : 1000점
• ID 선택자 : 100점
• CLASS 선택자 : 10점 (가상 클래스도 여기에 해당. not은 점수 계산 xx)
• 태그 선택자 : 1점
• 전체 선택자 : 0점

참고로 상속은 별도로 점수를 계산하지 않는다!

 

---