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 사이트

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference