[CSS] 선택자

태그 이름

h1 {
	...
}

 

아이디

#name {
	...
}

 

클래스

.name {
	...
}

 

자식

.name a {
	...
}

 

직속 자식

.name > a {
	...
}

 

복수 선택

/* name1 클래스를 가지고 있는 모든 태그와 name2 클래스를 가지고 있는 모든 태그 */
.name1, .name2 {
	...
}

 

여러 조건

/* name1 클래스와 동시에 name2 아이디를 가지고 있는 모든 태그*/
.name1#name2 {
	...
}

 

가상 클래스

자식

/* .name의 자식인 <p> 태그 중 첫 번째 태그 */
.name p:first-child {
	...
}

/* .name의 자식인 <p> 태그 중 마지막 태그 */
.name p:last-child {
	...
}

/* .name의 자식인 <p> 태그 중 n 번째 태그 */
.name p:nth-child(n) {
	...
}

/* .name의 자식 중 첫 번째 자식이 아닌 모든 <p> 태그 */
.name p:not(:first-child) {
	...
}

 

/* 마우스가 <a> 태그 위에 올라갔을 때 */
a:hover {
	...
}