HTML & CSS #12 : CSS 선택자

연결 선택자

컴비네이션 선택자, 조합선택자 라고도 한다.

선택자와 선택자를 연결해 적용 대상을 한정하는 선택자이다.

 

하위 선택자

부모 요소에 포함된 모든 하위 요소에 같은 스타일이 적용된다.

 

자식 선택자

부모 요소 > 자식 요소

자식 요소에 스타일을 적용하는 선택자

 

인접 형제 선택자

요소1 + 요소2

같은 부모를 가진 형제 요소 중 첫 번째 동생 요소만 적용

두 요소는 같은 레벨이면서 인접해야한다.

 

형태 선택자

요소1 ~ 요소2

형제 요소들에 스타일을 적용할 때 사용

모든 형제 요소에 적용 가능

---

속성 선택자

지정한 속성을 가진 요소를 찾아 적용시킬 때 사용

[속성] 대괄호를 사용하는데, 사용여부는 마음대로!

a[href] { } =>이런식으로 사용하면 된다.

 

[속성 = 값] 선택자

==로 생각하면 된다.

같은지 일치하는지 

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

a[target="_blank"] { } => 이런식으로 사용

 

[속성 ~= 값] 선택자

여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용

[class ~= "button"] { } => class 속성값이 button 인 요소를 찾아 스타일 적용

 

[속성 |= 값] 선택자

단어가 온전한지 아닌지 보기

a[title |= "us"] { } =>title 속성값에 us 가 포함되는지.

 

[속성 ^= 값] 선택자

앞부분이.

특정 값으로 시작하는 속성을 가진 요소를 찾아 스타일 적용

a[title ^= "us"] { } =>title 속성값의 앞부분이 us인지

 

[속성 $= 값] 선택자

뒷부분이.

특정 값으로 끝나는 속성을 가진 요소를 찾아 스타일 적용

a[href $= "hwp"] { } =>href 속성값의 뒷부분이 hwp인지

 

[속성 *= 값] 선택자

글자가 포함되는.

값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용

a[title ^= "us"] { } =>title 속성값에 us 가 포함되는지

---

가상클래스

:link 방문하지 않은 링크

:visited 방문한 링크

:active 웹 요소를 활성화 했을 때

:hover 웹 요소에 마우스 커서를 올려놓았을 때

:focus 웹 요소에 초점이 맞추어졌을 떄

=> a태그에 사용

 

:enabled

:disabled

 => 사용, 사용x

 

:checked 

=> 라디오 박스와 체크 박스에서 항목을 선택

 

:root

=> 구조 가상 클래스

웹 페이지.

 

:nth-child(n)

=> 앞에서부터 n번째 자식 요소

:nth-last-child(n)

=> 뒤에서부터 n번째 자식 요소

==>  n대신 2n : 짝수, 2n+1 : 홀수

 

:nth-of-type(n)

:nth-last-of-type(n)

=> 앞에서부터, 뒤에서부터 n번째 요소에 스타일 적용

 

:first-child

:last-child

=> 첫번째, 마지막 자식 요소

 

:first-of-type(n)

:last-of-type(n)

=>형제 요소 중 첫번째, 마지막 요소

 

:only-child

=> 자식 요소가 유일할 때

:only-of-type

=>자신이 유일한 요소일 때

 

:target

=> 앵커로 연결된 부분

 

:not( )

=> 괄호 안에 있는 요소를 제외한 부분

 

 

 

 

 

 

 

 

 

 

 

출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)

사진 출처 : Pixabay