CSS 선택자

CSS 선택자

▶CSS의 선택자(selector)는 CSS로 꾸미고자 하는 HTML의 영역을 선택하는데 사용된다.

1. 클래스 선택자 : .

.txt : 클래스가 txt인 모든 요소를 선택

2. 클래스 선택자_both (띄어쓰기 X)

.txt.is : 클래스가 txt 이면서 is를 동시에가지는 요소를 선택

3. 자손 선택자 : (사이에 띄어쓰기 되어있음)

.txt .is : 클래스가 txt인 요소의 자식 중 클래스가 is인 요소를 선택

4. 아이디 선택자 : #

#txt : 아이디가 txt 요소를 선택

5. 전체선택자 : *

* : 모든 요소를 선택

.txt* : 클래스가 txt인 요소 전부다! => 실무에선 잘 사용하지 않는다.

reset.css에서나 사용하는 정도..?

6. 요소선택자

태그이름 : 태그 전부를 선택

EX) p : p태그 전부를 선택

7. 직계자식 선택자 : >

.txt>p : 클래스가 txt인 요소의 자식 중에 직계(바로 뒤에 오는) p태그를 특정해서 선택

cf) .txt p VS .txt>p 다른 선택자이다.

1. class가 txt인 요소 안에 모든 p태그

2. class가 txt인 요소 안에 바로 직계 p태그

8. AND 선택자 : ,

.txt, .text : 클래스가 txt인 요소와 클래스가 text인 요소를 선택

9. 인접 형제 선택자 : +

.txt + p : 클래스가 txt인 요소 바로 뒤에 배치된 첫번째 p태그

10. 일반 형제 선택자 :

.txt ~ p : 클래스가 txt인 요소부터 모든 p태그를 선택

11. 속성 선택자

11-1. : @[]

a[href] : a 태그 중에 속성이 href가 있는 모든 요소

11-2. : @[=""]

a[href="http"] : a 태그 중에 속성 href의 값이 http인 모든 요소

11-3 : @[~=""]

a[href~="http"] : a 태그 중에서 속성 href의 값 중 http 가 포함된 모든 요소

11-4 : @[^=""]

a[href^="http"] : a 태그 중에서 속성 href의 값 중 http로 시작하는 모든 요소

11-5 : @[$=""]

a[href$="http"] : a 태그 중에서 속성 href의 값 중 http로 끝나는 모든 요소

12. 구조 가상 선택자

구조적 가상클래스란 문서 구조에서 위치나 다른 요소와의 관계에 따라

요소를 선택하게 해주는 선택자이다.

E:nth-of-type() E와 같은 유형인 요소중에 (n)번째인 요소

E:nth-child() E의 부모요소에서 n번째에 해당하는 자식요소

단, 그 n번째의 요소가 E와 같은 유형이 아닐경우 해당되지 않음

부모태그 해당요소:nth-child()

부모태그 해당요소:nth-of-type()

부모태그 해당요소:last-child

부모태그 해당요소:last-of-type

(괄호 안에) 음수가 들어가면 무시가 된다.

13. 상태 선택자

13-1

a:focus : 포커스가 있는 요소, 포커스란? 탭으로 넘어가지는 상태

ex) 플레이스테이션에서 스틱으로 포커스를 옮길 수 있다.

13-2

input:checked : 선택된 모든 input 요소( 선택이 가능한 것은 checkbox, radio 버튼)

14. 가상 선택자 (혹은 문자 선택자)

14-1

a::after : a 태그 요소의 뒷부분에 가상으로 만들어지는 요소를 선택

가상으로 만들어지기 때문에 가상 선택자라고도하고,

문자를 넣을 수 있어서 문자 선택자라고도 한다.

14-2

a::before : a 태그 요소의 앞 부분에 가상으로 만들어지는 요소를 선택

 

가상선택자

▶CSS에서 가상으로 컨텐츠를 추가 가능

▶html 에 들어가는 내용이 아니므로 스크린리더기가 정보를 읽지는 못함

▶꾸미는 효과로 주로 사용하고, 스크린 리더기가 읽으면 안되는 요소를 만들 때 사용

▶가상요소에 태그는 넣지 못하고 오로지 텍스트만 입력가능