기본 속성 선택자
태그에 작성된 특정 속성을 선택하는 선택자.
(id, class도 선택 가능은 하지만 보통 #, . 을 사용함)
[작성법]
선택자[속성명="속성값"] {css 코드;}
(참고)
1) 선택자는 생략할 수 있다.
-> 특정 속성을 가진 모든 요소 선택
2) "속성값" 양쪽 쌍따옴표("") 는
홑따옴표('')로 변경하거나 생략할 수 있다.
div[name="name-1"] {background-color: orange;}
자식 선택자(>)
지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자1 > 선택자2 { css 코드; }
- 선택자1 : 부모 요소 선택(반드시 필요)
- 선택자2 : 자식 요소 선택(반드시 필요)
후손(자손) 선택자( (띄어쓰기) )
지정된 요소에 하위에 존재하는 요소를 선택하는 선택자.
(자식 : 1단계 아래)
(후손 : n단계 아래 모두)
[작성법]
선택자1 선택자2 {css 코드;}
선택자1 : 부모(조상)요소 선택자
선택자2: 후손 요소 선택자
반응 선택자
사용자의 움직임에 반응하여 스타일이 달라지는 선택자
(클릭 유지, 마우스오버 등...)
- 요소를 클릭하고 있는 경우(:ative)
- 요소에 마우스가 올라가는 경우(:hover)
(hover: 마우스를 올리고 내릴 때)
상태 선택자
입력 양식(input, input 관련 태그)의
상태에 따라 선택되는 선택자.
:focus -> 요소에 초점이 맞춰졌을 때
:checked -> 요소가 체크 되었을 때(radio, checkbox)
:enabled / :disabled
-> 요소가 사용 가능한 / 불가능한 상태일 때
동위 선택자
동위관계(동일한 위치 == 형제 관계)에서
뒤(다음)에 위치한 요소를 선택하는 선택자.
A
B
B
1) A 바로 뒤(다음)에 있는 B요소 하나를 선택(+)
A선택자 + B선택자 {css코드;}
2) A 뒤에 있는 모든 B요소를 선택(~ 틸드)
A선택자 ~ B선택자 {css 코드;}
연습하기
checkbox 모양 바꾸기
[준비물]
- 동위 선택자 (+)
- 상태 선택자 (:checked)
- input type="checkbox"
- label 태그(for 속성)
- 체크 박스 이미지
안녕하세요!