Web 5일차 (CSS 고급 선택자)

연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 제한하는

선택자.

 

컴비네이션 선택자(combination selector) 또는 ‘조합 선택자’라고도 함

 

하위 선택자(descendant selector)

 

자식 선택자(child selector)

자식 요소에 스타일을 적용하는 선택자
두 요소 사이에 ‘>(부등호)’를 표시해 부모 요소와 자식 요소를 구분

 

인접 형제 선택자(adjacent selector)
같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용
요소1과 요소2 사이에 ‘+’ 기호 사용
요소1과 요소2는 같은 레벨이면서 요소1 이후 첫번째 요소2에 적용

 

형제 선택자(sibling selector)
형제 요소들에 스타일 적용
인접 형제 선택자와 다른 점은 모든 형제 요소에 다 적용된다는 것
요소1과 요소2 사이에 기호 ‘~’ 사용

 

[속성] 선택자
지정한 속성을 가진 요소를 찾아 스타일 적용

 

[속성 = 값] 선택자
주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용

 

[속성~=값] 선택자
여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

 

[속성 |= 값] 선택자
특정 값이 포함된 속성을 가진 요소를 찾아 스타일 적용
하이픈으로 연결해 한 단어 값을 이루는 요소에도 적용

 

[속성^=값] 선택자
특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

[속성 $= 값] 선택자
특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용

[속성*=값] 선택자
값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용

 

속성 선택자 정리

가상 클래스와 가상 요소

사용자 동작에 반응하는 가상 클래스 선택자

:link - 방문하지 않은 링크에 스타일 적용

:visited - 방문한 링크에 스타일 적용

:active - 웹 요소를 활성화했을 때의 스타일 적용

:hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용

:focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용

 

순서 중요:!! link - visited - hover - active

 

요소 상태에 따른 가상 클래스 선택자
:target – 앵커로 연결된 부분에 스타일 적용

 

 

:enabled, :disabled – 요소의 사용 여부에 따라 스타일 적용

:checked – 라디오 버튼이나 체크 박스에 체크했을 때 스타일 적용

:not – 특정 요소를 제외하고 스타일 적용

 

type="text" 필드와 type = " tell' 필드에 스타일 적용

일반적인 방법

not 선택자 사용

 

문서 구조에 따른 가상 클래스 선택자
웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일 적용
위치가 계속 바뀐다면 an+b 처럼 수식을 사용할 수도 있음.
이 때 n 값은 0부터.

 

: nth-child(n) n번째 자식 요소 선택

:nth-last-child(n): 마지막으로부터 n 번째 자식요소 선택

 

가상 요소
화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상 요소 사용
::first-line : 특정 요소의 첫번째 줄에 스타일 적용
::first-letter : 특정 요소의 첫번째 글자에 스타일 적용
::before : 특정 요소의 앞에 지정한 콘텐츠 추가
::after : 특정 요소의 뒤에 지정한 콘텐츠 추가