[CSS] CSS 고급 선택자

연결 선택자

1. 하위 요소에 스타일 적용하는 하위 선택자 / 자식 선택자

(상위 요소) (하위 요소) { ... }
//예시 selection p { ... }

부모요소 > 자식요소
//예시 selection > div {...}

2. 형제 요소에 스타일을 적용하는 인접 형제 선택자 / 형제 선택자

형제 + 동생 {...}
//예시 h1 + p {...}

//모든 형제 요소를 선택
//예시 h1 ~ p { ... }

1. 특정 속성이 있는 요소를 선택하는 속성 선택자

//특정 속성 예시 (a태그 내에 href 속성을 사용한 것들만 적용하는 방법)
a[href] {...}

2. 특정 속성 값이 있는 요소를 선택하는 속성 = 속성값 선택자

//속성 = 속성값 지정
a[target = _blank] {...}

3. 여러 값 중 특정 속성 값이 포함된 속성요소를 선택하는 속성 ~= 값 선택자

//특정 속성값 포함된 요소 선택하기
[class ~= button] { ... }

이 때, buttons 나 flat-button 등 다른 글자가 포함되어 있으면 선택하지 않음
- flat button / button은 가능, flat-button / buttons는 불가능

4. 특정 속성값이 포함된 속성 요소를 선택하는 속성 |= 값 선 택자

//us이거나 us-로 연결된 속성값 찾음
a[title |= us] {...}

5. 특정 속성값으로 시작하는 속성 요소를 선택, 속성 ^= 값

//속성 값이 eng으로 시작하는 요소를 모두 찾음
a[title ^= eng] {...}

6. 특정 속성값으로 끝나는 속성 요소를 선택, 속성 $= 값

//xls로 끝나는 요소를 모두 찾음
[href $= xls] {...}

7. 일부 속성값이 일치하는 요소를 선택하는 속성 *= 값 선택자

//w3가 포함된 모든 요소 선택
[href *= w3] {...}

종류	설명
:link	아직 사용자가 방문하지 않은 링크에 스타일 적용, 기본적으로 파란색 글자와 밑줄로 표시
:visited	사용자가 한 번 이상 방문한 링크에 스타일을 적용, 보라색이 기본 값
:hover	웹 요소 위로 마우스를 올려놓을 때 스타일을 적용
:active	웹 요소를 활성화 했을 경우(링크나 이미지를 클릭) 발생하는 스타일을 지정
:focus	텍스트 필드에 마우스를 올려놓거나, 웹에서 Tab을 입력하여 입력 커서를 이동한 경우 스타일 지정

// 다음과 같은 순서를 맞추어야함 ( LoVe HAte )
:link -> :visited -> :hover -> :active
//해당 순서로 입력하지 않으면, 스타일 정의시에도 효과가 나오지 않음

1. 요소 상태에 따른 가상 클래스

종류	설명
:target	앵커 대상에 스타일을 적용, 앵커의 목적지 되는 부분에 스타일을 적용할 수 있음 (블로그에서 목차를 누르면 이동할 때 처럼...)
:enabled, :disabled	요소가 사용할 수 있는 상태일때나 없는 상태일 때 스타일을 지정하는 경우 텍스트 필드에서 회원 약관등을 수정을 못하게 할 때 등등..
:checked	checked 속성이 있는 요소의 스타일을 지정하는 경우 사용(radio, checkbox 등) 버튼 클릭 시 레이블을 바꿀 경우 input + label (둘은 형제관계이므로) 선택자를 사용
:not	특정 요소를 제외하고 스타일을 적용, 괄호 안에 있는 요소를 제외함 예시 -> :not([type=....])

2. 구조 가상 클래스

특정 위치의 자식 요소 선택하는 법

3. 가상 요소

종류	설명
::first-line	지정 요소의 첫 번째 줄에 스타일을 적용
::first-letter	지정 요소의 첫 번째 글자에 스타일을 적용, 이 때 해당 요소는반드시 첫 번째 줄에 있어야함
::before	지정 요소의 앞에 스타일을 넣을 수 있음
::after	지정 요소의 뒤에 스타일을 넣을 수 있음