1. 가상 클래스 선택자 (Pseudo Classes Selectors)
1) hover
- E:hover
- E에 마우스(포인터)가 올라가 있는 동안에만 E 선택
2) active
- E:active
- E를 마우스로 클릭하는 동안에만 E 선택
3) focus
- E:focus
- E가 포커스 된 동안에만 E 선택
4) first-child
- E:first-child
- E가 형제 요소 중 첫번째 요소라면 선택
5) last-child
- E:last-child
- E가 형제 요소 중 마지막 요소라면 선택
6) nth-child(n)
- E:nth-child(n)
- E가 형제 요소 중 n번째 요소라면 선택
7) nth-of-type(n)
- E:nth-of-type(n)
- E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택
8) 부정 선택자
- E:not(S)
- S가 아닌 E 선택
2. 가상 요소 선택자 (Pseudo-Elements Selectors)
1) before
- E::before
- E 요소 내부의 앞에, 내용(content)을 삽입
2) after
- E::after
- E 요소 내부의 뒤에, 내용(content)을 삽입
3. 속성 선택자 (Attribute Selectors)
1) [attr]
- 속성 attr을 포함한 요소 선택
2) [attr=value]
- 속성 attr을 포함하며 속성 값이 value인 요소 선택
3) [attr^=value]
- 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택
4) [attr$=value]
- 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택
'Web > HTML5 & CSS' 카테고리의 다른 글
HTML5(8) - SB (0) | 2022.01.28 |
---|---|
HTML5(7) - BS (0) | 2022.01.28 |
HTML5(5) - CSS 기본문법 (0) | 2022.01.28 |
HTML5(4) - 문서구조 (0) | 2022.01.28 |
HTML5(3) - review (0) | 2022.01.28 |
댓글