CSS 선택자와 사용법 알아보기

Selector(선택자)

"스타일을 적용하는 대상"

 

p요소 = 선택자

기본선택자

선택자	기능설명
요소	특정 요소 선택
#id명	특정 id명을 가진 요소 선택
.class명	특정 class명을 가진 요소 선태
요소1 요소2	요소1안에 있는 모든 자손요소 요소2
부모요소1>자식요소2	부모요소1 안에 있는 자식요소2
형제요소1+형제요소2	형제요소1 옆에있는 형제요소2
선택1~선택2	선택1 기준 모든 선택2 요소
선택1, 선택2, 선택3	선택자 그룹선택
*	모든요소 선택

1. 타입선택자 

요소명을 선택자로 사용 

h1 {background-color:red;}
ul {margin:0px;}

'h1'과 'ul'은 선택자

2. class 선택자(요소명 생략가능)

클래스 이름으로 선택하기, 문서내에서 여러요소를 한 번에 선택할 수 있음

요소 옆에 class="이름" 으로 지정

css파일에서 class를 선택하고자 할때는 .으로 불러옴

div.class{color:red;}

3. id 선택자

클래스와 동일하게 아이디명으로 선택하기 

css파일에서 class를 선택하고자 할때는 #으로 불러옴

#id>p{color=red;}

 

id와 class 선택자는 모두 요소명을 생략할수 있다.

4. 자손, 종속선택자

• 특정요소 하위요소를 지정할 때 사용
• 공백 또는 >로 구분함
• id, class 선택자와도 함께 사용가능

section>p{color:red;}
#id>ul>li{color:blue;}

5. 형제 이웃선택자

기준이 되는 요소와 형제 또는 다음에 오는 요소 선택

h1+ul{color:red;}
h2~dl{color:blue;}

첫번째의 경우 h1태그와 바로 다음에 나오는 ul에 스타일이 적용됨

두번째의 경우 h2태그와 형제관계에있는 모든 dl요소에 스타일이 적용됨

6. 그룹선택자

• 선택자와 선택자를 콤마(,)로 구분하여 그룹화 하고 복수의 요소에 같은 스타일을 적용
• id 나 class 선택자도 ,로 그룹화 가능

#wrap, p.class, h1{color:red;}