[CSS] CSS 선택자 다루기 | 선택자 예제

1. 선택자

선택자는 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원한다. 

 

2. 기본 선택자

1. 전체 선택자
   • 모든 태그를 선택자로 지정한다. 
   • 형식 : *{ /* CSS 코드 */ }
2. 태그 선택자
   • 태그명으로 선택자를 지정한다. 
   • 형식 : 태그명{ /* CSS 코드 */ }
3. 아이디 선택자
   • id 속성값으로 선택자를 지정한다. 
   • 형식 : #id속성값{ /* CSS 코드 */ }
4. 클래스 선택자 
   • class 속성값으로 선택자를 지정한다. 
   • 형식 : .class속성값{ /* CSS 코드 */ }
5. 기본 속성 선택자 
   • HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정한다. 
   • 형식 : [속성]{ /* CSS 코드 */ } 혹은 [속성=값]{ /* CSS 코드 */ }
6. 문자열 속성 선택자
   • 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정한다.
   • MDN 사이트에서 자세한 정보를 확인할 수 있다. 

 

3. 조합 선택자

조합 선택자는 기본 선택자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역할을 한다. 

1. 그룹 선택자 여러 선택자를 , 기호로 구분해 선택자를 그룹으로 묶어 지정한다.
2. 자식 선택자 선택자 범위를 자식 관계로 제한하고, > 기호를 구분자로 사용한다. 
3. 하위 선택자 선택자 범위를 자식 및 자손 관계로 제한하고, 공백을 구분자로 사용한다. 
4. 인접 형제 선택자 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정하고, + 기호를 구분자로 사용한다. 
5. 일반 형제 선택자 특정 태그와 형제 관계에 있는 모든 태그를 선택자로 지정하고, ~ 기호를 구분자로 사용한다. 

반응형

4. 가상 요소 선택자

실제로 존재하는 요소는 아니지만, 존재한다고 가정하고 선택하는 방법이다. 가상 요소 선택자 앞에는 :: 기호(콜론 2개)를 붙인다. 

1. ::before 요소의 맨 앞 선택
2. ::after 요소의 맨 뒤 선택

 

5. 가상 클래스 선택자 

가상 클래스 선택자는 요소의 상태를 이용해 선택자를 지정하는 방법이다. 가상 클래스 선택자 앞에는 : 기호를 붙인다. 

1. 링크 가상 클래스 선택자
   • :link 링크를 한 번도 방문한 적 없는 상태
   • :visited 링크를 한 번 이상 방문한 적이 있는 상태
2. 동적 가상 클래스 선택자
   • :hover 마우스를 올린 상태
   • :active 마우스로 클릭한 상태
3. 입력 요소 가상 클래스 선택자
   • :focus 입력 요소에 커서가 활성화된 상태
   • :checked 체크박스 요소에 체크한 상태
   • :disabled 상호작용 요소가 비활성화된 상태
   • :enabled 상호작용 요소가 활성화된 상태
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 부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그

 

728x90

---

1. 위 선택자를 활용해 다음 문장에 나온 조건에 맞게 선택자를 작성해 보세요.

1. p 태그를 모두 선택합니다. 

p{}

 

2. id 속성값이 title인 태그를 선택합니다. 

#title{}

 

3. class 속성값이 box 이면서 id 속성값이 title인 태그를 선택합니다. 

.box#title{}

 

4. section 태그의 하위에 있는 모든 div 태그를 선택합니다. 

section div{}

 

5. label 태그와 인접한 형제 관계인 input 태그를 선택합니다. 

label + input{}

 

6. 링크 대상 경로가 https://www.naver.com인 a 태그의 하위에 있는 span 태그를 모두 선택합니다. 

a[href="https://www.naver.com"] span{}