[CSS] CSS 선택자

CSS 선택자

 
 

1. 기본 선택자
2. 조합 선택자
3. 가상 요소 선택자
4. 가상 클래스 선택자

 
 
- HTML 요소에 스타일을 적용하기 위해서는 우선적으로 해당 요소를 선택해야 한다.
- HTML 요소를 선택하기 위해서 선택자를 이용한다.
- CSS 3을 잘 다루려면 우선적으로 HTML 문서의 전체적인 구조를 파악해야 한다. 문서의 구조를 파악하지 못하면 해당 요소를 정확하게 선택할 수 없다.
 
 

---

1. 기본 선택자

 

1. 전체 선택자
2. 태그 선택자
3. 아이디 선택자
4. 클래스 선택자
5. 기본 속성 선택자
6. 문자열 속성 선택자

 

---

 

1) 전체 선택자  *

 
- 모든 요소를 한 번에 선택자로 지정하는 방법
- * {/* CSS 코드 */}

⚠️ 실무에서는 사용하지 않는 것이 좋다. 브라우저가 모든 태그들을 다 체크하기 때문에 렌더링 속도가 떨어져서 성능에 악영향을 미친다고 한다. 최대한 필요한 것만 작성하는 것이 좋다.
 
 

2) 태그 선택자

 
- 태그명으로 선택자를 지정하는 방법
- 지정된 태그명과 일치하는 모든 요소를 한 번에 선택
- 태그명 {/* CSS 코드 */}
 
 

3) 아이디 선택자  #

 
- id 속성값을 이용해 선택자를 지정하는 방법
- 문서 전체에서 유일한 고유식별자(ID)
- 속성값 앞에 # 기호를 붙여 구분한다.
- #id속성값 {/* CSS 코드 */}
 

⚠️ 아이디 선택자는 재활용을 할 수 없다. 유연성이 떨어지고, 재정의하기도 어렵기 때문에 필요한 경우에만 사용하는 것이 좋다. class 보다 특이성이 높다.


 

4) 클래스 선택자 .

 
- class 속성값을 이용해 선택자를 지정하는 방법
- 속성값 앞에 . 기호를 붙인다.
- .class속성값{/* CSS 코드 */}
 
 

5) 기본 속성 선택자 []

 
- 속성과 값을 사용해 선택자를 지정하는 방법
- 속성 선택자는 다른 선택자와 함께 사용할 수 있다.
- [속성]{/* CSS 코드 */}
- [속성=속성값]{/* CSS 코드 */}
- a[href]{/* CSS 코드 */} -> 태그, 아이디, 클래스 선택자 다 가능

 

6) 문자열 속성 선택자

 
- 태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정하는 방법
- MDN 참고
 
 

---

2. 조합 선택자

 
조합 선택자는 기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해 주는 선택자 방법이다.
 

1. 그룹 선택자
2. 자식 선택자
3. 하위 선택자
4. 인접 형제 선택자
5. 일반 형제 선택자

 

---

1) 그룹 선택자 ,

 
- 여러 선택자를 하나로 그룹 지을 때 사용한다. 선택자와 선택자는 , 기호로 구분한다.
- 한 번에 선택자를 지정 가능
- 선택자1, 선택자2, ... , 선택자n{/* CSS 코드*/}
 
 

2) 자식 선택자 >

 
- 자식 선택자는 부모 요소의 하위에 있는 직계자식 요소에 스타일을 적용할 때 사용한다. 
- 2개 이상의 선택자가 사용되며, 선택자와 선택자는 > 기호로 구분
- .box > p (class 속성값이 box인 요소와 자식 관계에 있는 p태그)
- 부모 선택자 > 자식 선택자{/* CSS 코드*/}
 
 

3) 하위 선택자 (스페이스)

 

- 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법
- 2개 이상의 선택자를 사용하고, 선택자와 선택자는 공백으로 구분
- div p (div 태그의 하위에 있는 p태그로 작성된 요소만 선택)
- 선택자1 선택자2 선택자3 ... {/* CSS 코드*/}
 
 

4) 인접 형제 선택자 +

 
- 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정한다.
- 2개 이상의 선택자를 사용하고, 선택자와 선택자는 + 기호로 구분
- 이전 선택자 + 대상 선택자{/* CSS 코드*/}
 
 

5. 일반 형제 선택자 ~

 
- 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정
- 2개 이상의 선택자를 사용하며, 선택자와 선택자는 ~ 기호로 구분한다.
 
 

---

3. 가상 요소 선택자

 

- 실제로 존재하는 요소는 아니지만, 존재한다고 가정하고 선택하는 방법이다.
- 인라인 요소 (width, height x / margin, padding 좌우만 )
- 가상 요소 선택자 앞에는 :: 기호를 붙인다.
- 기준 선택자::가상 요소 선택자{/* CSS 코드*/}
 

☑️ ::before : 콘텐츠 앞의 공간을 선택

- 지정된 요소의 첫 번째 자식

☑️ ::after : 콘텐츠 뒤의 공간을 선택

- 지정된 요소의 마지막 자식

 
📌 content 속성을 함께 사용해야 한다.

div::before {
	content: "";
}

div::after {
	content: "";
}

 
💡 tip )

• 이미지 삽입 가능
• <span>이 삽입된다고 생각하자.
   

---

4. 가상 클래스 선택자

 

 
가상 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리(:visited 등), 콘텐츠의 상태(특정 폼 요소에 적용한 :checked 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 :hover 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있다.

1. 링크 가상 클래스 선택자 / 거의 안씀
2. 동적 가상 클래스 선택자
3. 입력 요소 가상 클래스 선택자
4. 구조적 가상 클래스 선택자

 

---

1) 링크 가상 클래스 선택자

 

종류	설명
:link	링크를 한 번도 방문한 적 없는 상태
:visited	링크를 한 번 이상 방분한 적이 있는 상태

 

 

2) 동적 가상 클래스 선택자

 

종류	설명
:hover	마우스를 올린 상태
:active	마우스를 클릭한 상태

 

☑️ :hover는 cursor: pointer 와 함께 사용할 때가 많다. hover 상태에 마우스 커서 모양을 바꿔준다.

☑️ :active는 마우스 버튼을 누르는 순간부터 떼는 시점까지 활성화한다는 의미

 

3) 입력 요소 가상 클래스 선택자

 

종류	설명
:focus	입력 요소에 커서가 활성화되면 선택자로 지정
:checked	체크박스 요소에 체크한 상태
:disabled	상호작용 요소가 비활성화된 상태
:enabled	상호작용 요소가 활성화된 상태

 

☑️ :focus는 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동. 포커스를 받은 요소 자체에만 해당한다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within 사용
 
 

4) 구조적 가상 클래스 선택자

 

종류	설명
:first-child, :last-child	첫 번째 자식 태그와 마지막 자식 태그
:nth-child(n), :nth-last-child(n)	n번째 자식 태그와 끝에서 n번째 자식 태그
:nth-of-type(n), :nth-last-of-type(n)	n번째 특정 자식 태그와 끝에서 n번째 특정 자식 태그
:first-of-type, :last-of-type	부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그

:nth-child(n)

☑️ odd - 형제 요소에서 홀수번째(1, 3, 5, ...)
☑️ even - 형제 요소에서 짝수번째(2, 4, 6, ...)
 

5) 루트 요소 선택

:root
문서 트리의 루트 요소를 선택

 

📕선택자 MDN 참고하기

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

의사 클래스 - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

CSS 선택자 - CSS: Cascading Style Sheets | MDN