[CSS] [10-1] 연결 선택자 [10-2] 속성 선택자

[10-1] 연결 선택자

 

하위 선택자 (=자손 선택자)	예: section(상위요소) p(하위요소) {     } -손자요소에까지 모두 적용
자식 선택자	예: section(부모요소) > p(자식 요소) {     } -손자요소 빼고 자식요소까지만 적용
형제 선택자	*형 요소(요소1) / 동생 요소(요소2) 1. 인접 형제 선택자 -첫번째 동생요소만 선택하는 것 -예: h1 + p {     }  -> h1(형)의 동생인 p요소 중, 맨 처음으로 나오는 p만 선택 2. 형제 선택자 -동생요소(요소2)를 모두 선택하는 것 -예: h1 ~ p {     } -> 동생요소인 p요소는 모두 선택

 

[10-2] 속성 선택자

 

1. 속성 선택자

-찾고자 하는 속성이 있을 때 사용

-예 : a[href] {     } -> a요소 중에서  href 속성이 있는 요소를 선택하고자 할 때. 아래에서는 li a[href]로도 표기 가능

<li>중 메인 메뉴:는 href 속성이 없으므로 a[href] 스타일이 적용되지 않음

-예2 : a[href="#"] {     }      혹은 li a[href="#"] -> 아래 그림에서 메뉴1에만 해당

 

[속성]	-해당 속성이 있는 요소 [required]
[속성 = 값]	-지정한 속성값이 있는 요소 [target = _blank]
[속성 ~= 값]	-지정한 속성값이 포함된 요소 (하이픈 제외) (단어별) [class ~= button]
[속성 |= 값]	-지정한 속성값이 포함된 요소 (하이픈 포함) (단어별) [title |= us]
[속성 ^= 값]	-지정한 속성값으로 시작하는 요소 [title ^= eng]
[속성 $= 값]	-지정한 속성값으로 끝나는 요소 [href $= xls]
[속성 *= 값]	-지정한 속성값의 일부가 일치하는 요소 [href *= w3]

 

 

 

 

[예시]