css 셀렉터 기본설명(css3 selector basic)
selector {(property : value;)+ }에서 selector 부분을 살펴보도록 한다.
우리는 앞으로 ".class > #id + p ~ div" 와 같은 selector를 보고 어떤 것을 의미하는지 이해하면 되는 것이다. .class, #id, p, div가 들어가는 부분은 uni_selector라 지칭하고 >, +, ~ 와 같은 것을 op라고 지칭하도록 하겠다. 앞으로 css 문법을 보고 이해가 안 된다면 uni_selector를 모르거나 op를 모르는 것이라 보면 될 것이다. 추가 문법 등은 이 구조 하에서 추가하면 될 것이다. manual을 보지 않고 임의로 정한 방식이니 우선 이 글을 통해 이해하고 매뉴얼을 통해 정리하는 것을 추천한다.
개인적으로 간단히 정리해보면 selector는 다음과 같은 syntax를 같는다. 초반에 css를 접했을 때 많이 나오는 문법들만 추린 것이다. 대략적인 구조를 보고 insight를 얻기를 바란다.
selector_list : selector [, selector]
selector : uni_selector [op uni_selector]
op : ' ' | '>' | '+' | '~' 등
uni_selector : tag selector | class selector | id selector
1. uni_selector
1.1.tag
p{}: p 태그를 가리키게 된다. p 태그가 나오면 선택을 하는 방식이다. 모든 p태그를 가리킨다 볼 수 있다.
1.2 class
.class1{}: 태그 속성이<class="class1">로 되어있는 태그를 가리키게 된다.
1.3 id
#p_id1{}: 태그 속성이 <id="p_id1">와 같이 id 값을 설정해둔 태그를 가리키게 된다. id는 unique한 값으로 설정해야 한다.
1.4 attribute
[class="class1"]: 태그의 속성 중에 class 속성이 있고 그 값이 "class1"인 것을 가리키게 된다.
1.5 universal
* : 모든 요소를 가리킨다.
ns|* : namespace ns에 있는 모든 요소를 가리킨다.
2. op
2.1 ' ' (띄어쓰기)
div p{}: 이 방식을 사용하면 아래 예시에서 ~에 있는 p 태그에 모두 적용한다.
<div>
~
</div>
2.2 '>'
div > p{}: '>' 기호를 사용하면 div의 바로 한 단계 아래에 있는 p 태그만 적용된다. 아래 예시에서 어떤 p에 적용되는지 예상해보자.
<div>
<p>p1</p>
<div> <p>p2</p></div>
<div>
예시에서는 p1과 p2에 모두 적용된다. 왜냐하면 p태그이면서 부모 태그가 div이면 되기 때문이다. 이 말은 즉, 모든 p에 대해서 div가 부모인지를 체크하고 적용하는 과정이라는 것이다. 제일 상위에 있는 div에 적용하는 것이 아닌 것이다.
2.3 '~'
div ~ p
같은 level 중에서 div 뒤에 나오는 모든 p에 적용된다.
2.4 '+'
div + p
같은 level 중에서 div 바로 뒤에 나오면서 p인 태그이면 적용된다.
응용하면 p+p와 같이 쓸 수 있다. 즉 첫 번째 p태그를 제외하고 모두 선택할 수 있다.
또한 다음과 같은 코드에서 p+p를 사용하면 어떻게 될까? p의 같은 레벨이면서 바로 뒤에 있는 p인 태그에 적용되므로 p2, p3, p4에 적용된다. 다양한 응용이 가능할 것이다.
<div>
<p>p1<p/>
<p>p2<p/>
<p>p3<p/>
<p>p4<p/>
</div>
위의 설명 정도를 제대로 알고 구조를 익히고 있으면 selector를 한눈에 볼 수 있다. 마우스가 올라간 태그를 찾거나 태그의 마지막 child를 찾는 것은 어떻게 할 수 있을까? 이 부분은 이후 글에서 정리하도록 한다.
syntax manual 사이트