CSS 핵심개념(5)

CSS 선택자

1. CSS 선택자 목록

.book-description, .book-info {
	font-size : 12px;
	font-weight : 400;
	line-height : 17px;
}

같은 CSS 선언은 묶어서 처리해주면 된다.

2. 선택자 붙여쓰기

<!-- 여러가지 class 사용(delay, book-info) -->
<p class="delay book-info></p>

/* delay와 book-info 둘다 가지고 있는 요소 */
.delay.book-info {
	background-color : #c76546;
}

/* <p>태그이면서 delay클래스와 book-info 클래스 */
p.delay.book-info {
}

/* id도 같다(id와 class 섞어서 사용 가능). 가능한 id를 앞에 쓰는걸 추천 */
p#shipping {
}

#shipping.delay.book-info {
}

3. 자식, 자손 선택하기

/* book-container의 자식이면서 title 클래스를 가진 요소 */
.book-container > title {
}

/* 띄어쓰기가 있는 경우, book 클래스의 date 자손 클래스 */
.book .date {
}

자손을 선택하는 경우가 더 많다.

4. 가상 클래스

a:hover { /* hover는 가상 클래스 이름 */
	text-decoration : underline;
}

링크에 마우스를 올렸을 때 밑줄이 나타나게 된다.

• :active : 클릭했을 때
• :visited : 방문한 적이 있는 링크
• :focus : 포커싱 되었을 때

5. 전체 선택자(모든 요소)

* {
  box-sizing: border-box;
}

.gallery > * {
  width: 120px;
  height: 90px;
}

n번째 자식 선택자 : nth-child()

/* .gallery의 세 번째 자식 */
.gallery :nth-child(3) { ... }

/* .gallery의 짝수 번째 자식 */
.gallery :nth-child(even) { ... }
.gallery :nth-child(2n) { ... }

/* .gallery의 홀수 번째 자식 */
.gallery :nth-child(odd) { ... }
.gallery :nth-child(2n+1) { ... }

/* 첫 번째, 마지막 자식 */
.gallery :first-child { ... }
.gallery :last-child { ... }