CSS 선택자의 종류

- 선택자종류

1. 태그 선택자

기존 HTML에 존재하는 태그에 대하여 CSS 효과를 적용

<style>

h5 { color:#F00; }
h6 { color:#0F0; font-size: 30px }

</style>

2. 클래스 선택자
주 목적이 여러 곳에서 공통된 효과를 주려고 사용하는 선택자

EX:) 

<style>

.main_title{
font-size : x-large;
}

</style>

 

3. 아이디 선택자 

해당 페이지내에 유일한 태그에 대하여 적용하기 위한 선택자.

클래스 선택자처럼 중복으로 여러곳에 사용해도 적용은 되지만, 만들어진 의도와

맞지 않으므로 유일하게 사용할것.

<style> 
 #select {font-size:50px;} 
</style>

4. 가상 클래스 선택자

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 함.

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때
• :focus - 포커스 되었을 때 (input 태그 등)
• :first - 첫번째 요소
• :last - 마지막 요소
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(2n+1) - 홀수 번째 자식

위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있음

.some-box:hover{ background-color: red; }
input.no-border:focus{ border: none }
.container-box:last-child{ margin-right: 0; }

 

5. 기타 선택자들

 

"~" ,  "+" , ",", "선택자:first-child"

 

 

 

참조 : CSS 가상 클래스 선택자 - ofcourse