CSS 선택자(Selector) - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

{{tag> css html div center }}
======CSS 선택자(Selector)======

선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

http://www.nextree.co.kr/p8468/

====복합 선택자(Combinator)====

<file css>
.mMenu a:first-child {background-color:blue; }
.mMenu a:nth-child(2){background-color:blue; }
.mMenu a:nth-child(3){background-color:blue; }
.mMenu a:nth-child(4){background-color:blue; }
.mMenu a:nth-child(5){background-color:blue; }
.mMenu a:nth-child(6){background-color:blue; }
.mMenu a:nth-child(7){background-color:blue; }
.mMenu a:nth-child(8){background-color:blue; }
.mMenu a:last-child {background-color:blue; }

</file>
===하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)===

태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다

{{http://www.nextree.co.kr/wp-content/uploads/2014/03/yrkim-140331-selector-06.png}}

===인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)===

같은 부모 요소를 가지는 요소들을 형제 관계라고 부릅니다. 이 때 먼저 나오는 요소를 ‘형 요소’, 나중에 나오는 요소를 ‘동생 요소’라고 합니다. 먼저 나온다는 것은 html문서에 먼저 쓰여지는 것을 말합니다.

인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 때에만 스타일을 적용합니다. 하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다

===속성 선택자(Attribute Selectors)===

위에서 살펴본 선택자들은 태그나 클래스 이름, ID이름만 알면 그대로 스타일을 적용할 수 있습니다. 하지만 이제 살펴볼 속성 선택자는 클래스 속성이나 ID속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다.

<file css>
/* E[attr]형식 */
a[href] { background: yellowgreen; color: black; }
 
/* E[attr="val"]형식 */
input[type="text"] { width: 150px; border: 1px solid #000; }
 
/* E[attr$="val"]형식 */
a[href$=".xls"] { background: darkgreen; }
 

<a href="one.html">E[attr]형식</a>
<input type="text" name="name">
<a href="one.xls">E[attr$="val"]형식</a>
</file>

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International