위 사이트에서 언급된 선택자와 이를 이용하는 방법을 정리. 나중에 새로 알게 된 것이 있다면 추가로 정리하자.
Type Selector A
ID Selector #A
Descendant Selector A B
A>B와 차이점
<A>
<B>
</B>
<C>
<B>
</B>
</C>
</A>
A B 는 여기서 C안에 있는 B도 선택하지만 A > B는 A바로 아래에 있는 자식 B만 선택함.
Combine the Descendant & ID Selectors A#B
Class Selector .A
Combine the Class Selector A.B
Comma Combinator A, B 선택자는 comma(,)로 연결하여 사용할 수 있다. 즉, h1태그와 special 클래스를 동시에 선택한 것이 된다.또, 가독성을 높이기 위해 다음 줄에 선택자를 작성할 수도 있다. 이때 comma는 첫 번째에 위치해도 되고 다음 줄에 위치해도 된다.
The Universal Selector *
Combine the Universal Selector A *
Adjacent Sibling Selector A + B A 다음으로 오는 B 한 개를 선택한다.
General Sibling Selector A ~ B A 다음으로 오는 B를 '전부' 선택한다.
Child Selector A > B
First Child Pseudo-selector :first-child 가장 위에 있는 orange를 선택하는방법: plate>orange:first-child or plate orange:first-child
Only Child Pseudo-selector :only-child
Last Child Pseudo-selector :nth-last-child(A)
Nth Child Pseudo-selector : nth-child(A)
Nth Last Child Selector :nth-last-child(A) 뒤에서 부터 셈.
First of Type Selector :first-of-type
Nth of Type Selector :nth-of-type(A) A에는 even, odd와 같은 값이 들어갈 수 있음.
Nth-of-type Selector with Formula :nth-of-type(An+B)
여기서 3번째, 5번째 plate선택하려면 n=0부터 시작하므로 2n+3하면 됨. plate:nth-of-type(2n+3)
Only of Type Selector :only-of-type
Last of Type Selector :last-of-type
Empty Selector :empty
Negation Pseudo-class :not(X) X안에 들어간 선택자는 제외하고 선택.
큰 사과 2개 선택: apple:not(.small)
Attribute Selector [attribute] 속성을 가지고 있는 요소를 선택할 때 사용 어떤 태그인지는 관계 없이 지정한 속성만 가지고 있다면 모두 선택.
Attribute Selector A[attribute] 속성을 가지고 있는 특정 요소를 선택할 때 사용 예를 들어 <a href=""></a>가 있을 때 a[href]는 href속성을 가지고 있는 모든 a type을 선택.
Attribute Value Selector [attribute="value"] 정확한 값이 있는 속성을 가지는 요소를 선택할 때 사용
Attribute Starts With Selector [attribute^="value"] 문자열이 value와 같은 문자열로 시작하면 선택
Attribute Ends With Selector [attribute$="value"] 문자열이 value와 같은 문자열로 끝나면 선택
Attribute Wildcard Selector [attribute*="value"] value가 포함되기만 하면 선택
