CSS 선택자 정리

CSS 선택자 사용하기

1. 태그 이름

특정 태그 전체를 선택하려면 태그 이름을 사용합니다.

CSS 선택자의미

li	모든 li 태그
p	모든 p 태그

2. 아이디

특정 아이디의 태그를 선택하려면, 아이디 앞에 #을 붙입니다.

CSS 선택자의미

#coffee	아이디가 coffee인 태그
#tea-leaf	아이디가 tea-leaf인 태그

3. 클래스

특정 클래스의 태그를 선택하려면, 클래스 앞에 .을 붙입니다.

CSS 선택자의미

.favorite	클래스가 favorite인 태그
.reverse	클래스가 reverse인 태그

4. 속성

속성의 이름과 값으로 태그를 선택하려면, [name="value"] 형식으로 적습니다.

CSS 선택자의미

[alt="green-tea"]	alt 속성의 값이 "green-tea"인 태그
[href="https://www.google.com/"]	href 속성의 값이 "https://www.google.com"인 태그

 

 

 

CSS 선택자 조합해서 사용하기

1. OR 연산

쉼표 (,)를 활용하면 OR 연산이 됩니다. 두 CSS 선택자 중 하나라도 해당되면 선택합니다.

CSS 선택자의미

#login, .left	아이디가 login이거나 클래스가 left인 태그
p, i	모든 p 태그와 모든 i태그

2. AND 연산

두 CSS 선택자를 붙여쓰면 AND 연산이 됩니다. 두 CSS 선택자에 모두 해당되는 요소만 선택합니다.

CSS 선택자의미

.favorite.private	favorite 클래스와 private 클래스를 모두 가진 태그
p.favorite	favorite 클래스를 가진 p 태그

3. 중첩된 요소

중첩된 태그를 선택하려면, 두 CSS 선택자를 띄어쓰면 됩니다. 첫 번째 CSS 선택자로 선택된 태그 내부에서, 두 번째 CSS 선택자를 찾습니다.

CSS 선택자의미

.favorite .private	favorite 클래스를 가진 태그에 중첩된, private 클래스를 가진 태그
p .favorite	p 태그 아래에 중첩된, favorite 클래스를 가진 태그