Do it : CSS - 12.선택자, 가상 클래스

연결 선택자

-선택자와 선택자를 연결해 적용 대상을 한정시킨다

 

하위 선택자(=자손 선택자)  : 지정한 모든 하위 요소

-부모 요소에 포함된 하위 요소 모두에 스타일 적용 

-자식, 손자까지 모두 적용 대상이 있으면 표시됨

-빈 칸

#container ul { }

 

자식 선택자 : 자식 요소만

-바로 아래 요소에만 스타일 적용

- > 부등호

#container > ul { }

 

인접 형제 선택자 : 가장 가까운 형제 요소

-먼저 나오는 것=형 요소, 나중에 나오는 것=동생 요소

-같은 레벨이면서 첫번째 요소에 스타일 적용

- + 더하기

h1 + ul { }

 

형제 선택자 : 형제 요소

-모든 형제 요소

- ~ 틸드

 

 

---

속성 선택자

-태그 안에 사용하는 속성들의 값에 따라 스타일 지정

-활용도 높다

 

[속성] 선택자 : 지정한 속성

a[href] { }

-a 태그 중 href 속성이 있는 요소에 스타일 지정

 

[속성=값] 선택자 : 특정 값을 갖는 속성

-속성과 속성값이 일치하는 요소를 찾아 스타일 적용

a[target="_blank"]

-target의 속성값이 _blank인 링크에 스타일 지정

 

[속성~=값] 선택자 : 특정 값이 포함된 속성

-여러값들 중 특정값이 포함된 속성에 스타일 적용

[class~="button"]

-class 태그 중에 속성값이 button 포함

-flat button 됨, flat-button 안 됨, buttons 안 됨

 

[속성 |=값] 선택자 : 특정 값이 포함된 속성

-하이픈 연결 단어도 된다

a[title |="us"]

-us-english 됨

a[title |="jap"]

-japanese 안 됨

 

[속성 ^=값] 선택자 : 특정 값으로 시작하는 속성

a[title ^="jap"]

-japanese 됨

 

[속성 $=값] 선택자 : 특정 값으로 끝나는 속성

a[href $="hwp"]

 

[속성 *=값] 선택자 : 값의 일부가 일치하는 속성

-어느 위치든 해당값이 포함되어 있기만 하면 됨

[href *="w3"]

-W3C 사이트로 연결하는 링크 텍스트에만 스타일 적용

 

 

---

가상 클래스와 가상 요소

-지정하기 어려운 대상 지정할 때 : 메뉴의 몇번째, 단락의 첫번째 등

-가상클래스( : ), 가상 요소( :: )

 

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

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

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

:hover -마우스 커셔 올려 놓을 때

:active - 링크나 이미지 요소 누를 때

:focus - 텍스트 필드 안에 커셔, tab 눌러 초점 이동할 때

~순서에 주의한다, 순서 바뀌면 스타일 적용 안됨 

 

UI 요소 상태에 따른 가상 클래스

:enabled -사용 가능한 상태일 때

:disabled -사용 불가능한 상태일 때

:checked -라디오박스, 체크 박스에서 항목 선택할 때 스타일 적용

input : checked +span { }

 

구조 가상 클래스

-웹문서를 기준으로 특정 위치에 있는 요소에 스타일 지정

:root -문서 전체에 적용(HTML에 적용)

:nth-child(n) :nth-last-child(n) -여러개 항목이 일렬로 나열, 몇번째에 스타일 적용 (앞에서부터, 끝에서부터)

div p:nth-child(3)

div p:nth-child(odd) 홀수열에만 적용

div p:nth-child(even) 짝수열에만 적용

:nth-of-type(n) :nth-of-type(n) -p태그 li태그 여러개 나열, 특정 태그 위치에 스타일 적용

:first-child  :last-child -첫번째, 마지막 자식요소에 스타일 적용

:first-of-type  :las-of-type -형제 관계 요소 중 첫번째, 마지막

:only-child  :only-of-type -하나뿐인 자식요소에 스타일 적용

 

그 외 가상 클래스

:target -앵커 목적지에 스타일 적용 (anchor - 같은 문서에서 다른 위치로 이동할 때)

:not - 괄호 안에 요소를 제외하고 스타일 적용

p:not(#ex)

 

가상 요소

-가상 요소 : 내용의 일부만 선택해 스타일을 적용

-가상 클래스 : 여러 태그 중 원하는 태그 선택

::first-line  ::first-letter - 첫번째 줄, 첫번째 글자에 스타일 적용

::before ::after - 내용의 앞뒤에 콘텐츠 추가