css 선택자 종류 (css slector)

선택자 : css로 UI의 어는 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. css로 속성을 부여하는 형식은 다음과 같습니다.

Rule set

01.type 선택자

html 문서의 태그 이름을 선택자로 사용할 수 있습니다.

다음예제에서는  p 태그 안의 글자들을 파란색으로 표시하도록 속성을 부여하고 있습니다.

See the Pen type 선택자 by ture403 (@ture403) on CodePen.

02.id선택자

html 문서의 요소중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. html 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다. css에서는 id 선택자 앞에 #을 붙여야 합니다. id명이나 class명은 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다.

See the Pen id 선택자 by ture403 (@ture403) on CodePen.

03.class 선택자

html 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다. html 요소에 같은 이름을 부여할 떄에는 class로 이름을 붙입니다.  즉, 여러 개의 요소에 같은 calss명을 부여할수 있습니다. 또한 하나의 요소에 여러 개의 class명을 부여할 수도 있습니다. css에서는 calss 선택자 앞에 . 을 붙여야 합니다.

See the Pen class 선택자 by ture403 (@ture403) on CodePen.

04. 전체 선택자

전체 선택자는 페이지의 모든 요소를 가리키는 선택자로서 * 로 표시합니다.

See the Pen 전체 선택자 by ture403 (@ture403) on CodePen.

05.하위 선택자

하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다.

다음 예제에서는  abox 클래스 내부에 있는 모든  p 태그들의 문자를 파란색으로 표시하도록 속성을 부여하고 있습니다.

See the Pen 하위 선택자 by ture403 (@ture403) on CodePen.

06.자식 선택자

자식 선택자는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를 > 으로 분리합니다.

다음예제 에서는  abox 클래스 내부에 있는 요소들 중 또 다른 하위 요소 안에 있는 p 태그들을 제외한 나머지 p 태그들의 문자만을 파란색으로 표시하도록 속성을 부여하고 있습니다.

See the Pen 자식 선택자 by ture403 (@ture403) on CodePen.

07.인접 선택자

인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 + 로 분리합니다.

다음 예제에서는 전체 p 요 중 h1 요소의 바로 다음에 나오는 p 태그들의 문자만을 파란색으로 표시하도록 속성을 부여하고 있습니다.

See the Pen 인접 선택자 by ture403 (@ture403) on CodePen.

08.형제 선택자

형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며 ~ 로 구분합니다. 

다음 예제에서는 h3와 같은 계층에 있는 p 태그들만 파란색으로 나타나도록 속성을 부여하고 있습니다. 인접해 있지 않고 멀리 있어도 같은 계층에 있다면 속성이 부여됩니다. 반면 하위 계층에 있는 p 태그들에는 속성이 부여되지 않습니다.

See the Pen 형제 선택자 by ture403 (@ture403) on CodePen.

09.그룹 선택자

그룹 선택자는 여러 선택자들을 ,  로 구분하여 함께 묶어 속성을 부여하는 것입니다.

다음 예제에서는  h1과 p 요소에 테두리 속성을 한번에 부여하고 있습니다.

See the Pen 그룹 선택자 by ture403 (@ture403) on CodePen.

10.속성 선택자

html 요소의 속성의 속성 유무 또는 속성값을 중괄호 [ ] 안에 넣어 선택자로 사용할 수 있습니다.

속성 값	설명
h1[class]	class명을 가진 h1 요소
img[alt]	alt 속성을 가진  img 요소
p[class="abc"]	class명이 유일하게 'abc'인 p 요소

 

속성명	설명
p[class~="abc"]	calss명이 유일하게 'abc'이거나 여러 개의 class명 중 하나가 'abc'인 p 요소
p[class|="abc"]	class명이 'abc'이거나 'abc-'로 시작하는 p요소
p[class^="abc"]	class명이 철자 'abc'로 시작하는 p 요소
p[class$="abc"]	class명이 철자 'abc'로 끝나는 p 요소
p[class*="abc"]	class명에 철자 'abc'가 포함되어 있는 p 요소
a[href^="abc"]	href 속성값이 'mailto'로 시작하는  a 요소

See the Pen Untitled by ture403 (@ture403) on CodePen.

11.가상클래스 선택자

가상 클래스 선택자란 링크가 걸리 문자에 스타일을 부여하는 것입니다.

속성 값	설명
a:link	링크가 걸린 문자에 속성을 부여하는 선택자
a:visited	링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자
a:hover	링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자
a:active	링크 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus	링크 걸린 글자에 포커스가 생길 경우의 속성을 부여한는 선택자 (키보드 [tab]키 등으로 포커스가 나타날 경우)

다음 예제는 링크가 걸린 글자는 파란색이며, 마우스가 닿으면 빨간색으로 변경되는 속성을 부여하고 있습니다.

See the Pen 가상 클래스 선택자 by ture403 (@ture403) on CodePen.

12.가상요소 선택자

가상요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자 입니다.

속성 값	설명
:first-letter	요소의 첫 글자
:first-line	요소의 첫 줄
:first-child	같은 요소 중 첫 번째 요소
:last-child	같은 요소 중 마지막 번째 요소
:nth-child (n)	같은 요소 중 n번째 요소
:before	요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소)
:after	요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소)

:before 나 :after는 마크업할 당시에는 없었던 요소를 css에서 넣어줄 떄 사용할 수 있습니다. 새로 생성된 공간에 내용을 넣어 줄때에는 content 속성을 이용하여 content="~"와 같이 기술합니다.

다음 예제에서는  p 태그에 이름을 주지 않고도, 어느 p 태그에든 원하는 속성을 부여할 수 있음을 알아봅시다.

See the Pen Untitled by ture403 (@ture403) on CodePen.