DK

CSS 선택자

공백 : 자손

> : 자식

+ : 동생

~ : 동생들

태그 선택자

tag

• tag와 일치하는 모든 태그를 선택한다.

tag1, tag2

• tag1과 일치하는 모든 태그, tag2와 일치하는 모든 태그를 선택한다.

tag1 tag2

• tag1의 자손태그 중에서 tag2와 일치하는 모든 태그를 선택한다.(하위 모든 태그)

tag1 > tag2

• tag1의 자식태그 중에서 tag2와 일치하는 모든 태그를 선택한다. (바로 밑)

tag1 + tag2

• tag1의 형제(동생) 태그 중에서 tag2와 일치하는 태그 하나를 선택한다.

tag1 ~ tag2

• tag1의 형제(동생) 태그 중에서 tag2와 일치하는 모든 태그를 선택한다.

클래스 선택자.

.classname

• classname와 일치하는 class속성값을 가진 모든 태그를 선택한다.

.classname tag

• classname과 일치하는 class속성값을 가진 태그의 자손태그 중에서 tag와 일치하는 모든 태그를 선택한다.

아이디 선택자 #

#id

• id와  일치하는 id속성값을 가진 모든 태그를 선택한다.

속성선택자 []

[ attrname ]

• attrname과 일치하는 속성을 가진 모든 태그를 선택한다.

[ attrname = ‘attrvalue’ ]

• 지정된 속성과 속성값을 가진 모든 태그를 선택한다.

[attrname^=’attrvalue’]

• attrname의 값이 attrvalue로 시작하는 모든 태그를 선택한다.

[attrname$=’attrvalue’]

• attrname의 값이 attrvalue로 끝나는 모든 태그를 선택한다.

추가선택자:

:first-child

• p:first-child : p태그중에서 장남인 p태그를 선택한다.

:last-child

• p:last-child : p태그중에서 막내인 p태그를 선택한다.

:nth-child(n)

• n번째 자식 태그를 선택한다. (n은 0부터 시작)

:eq(n)

• n번째 태그를 선택한다.  (n은 0부터 시작) (전체중에서)

:lt(n)

• n번째 이전 태그를 선택한다.  (n은 0부터 시작)

:gt(n)

• n번째 이후 태그를 선택한다.  (n은 0부터 시작)