CSS3 선택자 연구

속성 선택기

[title]: 제목 속성이 있는 요소를 선택하세요.

[title='hello']: 속성이 title이고 값이 hello인 요소를 선택합니다.

[title~='hello']: 속성이 title이고 값의 일부가 hello인 요소를 선택하세요. Hello는 공백으로 구분된 별도의 값이어야 합니다.

[title*='hello']: 속성이 title이고 hello가 포함된 요소를 선택합니다.

[title|='hello']: 선택한 속성은 title이고 값은 hello로 시작하며 그 뒤에 -가 오는 모든 문자가 허용됩니다.

[title^='hello']: 속성이 hello로 시작하는 모든 문자

[title$='hello']: 속성이 hello로 끝나는 모든 문자

[title^='hello'][title$='.py']: 속성이 hello로 시작하고 .py로 끝나는 요소를 선택하세요.

커넥터

h1~p: h1 요소 이후 동일한 레벨의 p 요소를 모두 선택

p~p: 첫 번째 p 요소를 제외하고 p 요소 다음의 동일한 레벨의 모든 p 요소 선택

h1+p: h1 요소 다음의 첫 번째 형제 p 요소 선택

의사 클래스 선택자

n번째 시리즈, 숫자

nth-child(): 위치에 따라 개수

nth-of-type(): 유형에 따라 개수

nth-last-child() : 위치에 따라 끝부터 센다

nth-last-of-type(): 유형별로 끝부터 계산

선택할 처음 몇 개의 요소를 지정하려면 (-n+숫자)를 사용하세요.

-n은 0, -1, -2, -3...부터 시작하여 음수 방향으로 증가합니다.

인터레이스 색상 변경을 구현하려면 :nth-child(odd) 또는 :nth-child(even)를 사용하세요.

단일 선택

first-child: 위치별로 첫 번째 요소 선택
first-of-type: 유형별로 첫 번째 요소 선택

last-child: 위치별로 마지막 요소 선택
last-of-type: 유형별로 마지막 요소 선택

only-child: 다른 형제 요소가 없을 때 선택됩니다.
only-of-type: 형제 요소가 있을 수 있지만 유형이 달라야 합니다.

only-of-type을 사용하면 다른 유형의 요소에서 요소를 선택할 수 있는 반면, only-child를 사용하려면 해당 요소가 단독으로 존재해야 합니다. 이것은 매우 유용할 것임에 틀림없지만 아직 발견되지 않았습니다.

의사 클래스

:대상

1. 클릭 이벤트를 시뮬레이션하기 위한 용도:target
2. 　
3. 타겟을 사용하여 탭 전환
4. 대상 의사 클래스를 사용하면 사용자가 읽고 싶어하는 댓글을 쉽게 강조 표시할 수 있습니다

타겟별로 만든 탭 전환을 활용해 보세요. 물론 아직 부족한 점이 많지만 이를 통해 확장할 수 있습니다.

:empty
하위 요소와 텍스트 노드가 없는 요소를 선택합니다.

:root
루트 요소를 선택합니다. HTML에서 루트는 항상 html 요소입니다.

:not
매개변수는 요소 또는 기타 의사 클래스 선택기 전달을 지원하지만 커넥터 및 의사 요소 전달은 지원하지 않습니다.
지정된 매개변수를 제외한 모든 요소 선택

요소 상태 의사 클래스

:체크됨
체크박스가 선택된 경우

:disabled
요소가 비활성화된 경우

:활성화
요소가 비활성화되지 않은 경우

의사 요소

::first-line
텍스트의 첫 번째 줄 선택

::first-letter
첫 글자 선택

::after
요소 끝에 의사 요소

를 추가합니다.

::before
요소 시작 부분에 의사 요소

를 추가합니다.

::selection
선택한 텍스트에 적용

이러한 선택기를 올바르게 사용하면 많은 문제를 해결하는 데 도움이 될 수 있습니다. 아직 연구 중이며 이 문서의 내용은 장기적으로 업데이트될 예정입니다.