CSS 선택자 종류 14가지

CSS 선택자 종류 14가지

 

 

 

 

오늘은 CSS의 선택자 종류 14가지를 간단하게 정리해보려고 합니다.

 

우선 선택자란 CSS가 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.type 선택자, id선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자, 선택자의 우선순위 이렇게 14가지의 선택자가 있는데요

그럼 하나씩 간단하게 알아볼까요!?

 

 

 

 

type 선택자

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

 

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

p태그 안에 글자들을 파란색으로 표시하도록 속성 부여

 

 

 

 

id 선택자

id로 이름을 붙일 때는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 또 주어서는 안됩니다.
CSS에서는 id선택자 앞에 '#'을 붙여야 합니다.
id명이나 class 명은 숫자로 시작할 수 없습니다.

class 선택자

문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성을 부여할 수 있습니다.
여러개의 요소에 같은 class명을 부여할 수 있습니다.

전체 선택자

페이지의 모든 요소를 가리키는 선택자입니다.
'*' 로 표시합니다.
어떤 id명이나 class명이 부여되어있든 상관없습니다.

하위 선택자

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

자식 선택자

요소 내부에 있는 해당 요소를 가리킵니다.
하위 요소의 하위 요소는 가리키지 않습니다.
'>'로 분리합니다.

인접 선택자

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

형제 선택자

현재 요소와 같은 계층에 있는 요소만을 선택할 수 있습니다.
'~'로 구분합니다

그룹 선택자

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

 

 

 

 

 

위 선택자들의 예제

지금까지 살펴본 선택자들을 사용한 예제를 한번 살펴보면 더 이해가 쉽겠죠?

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

모든 요소의 밖 여백을 사방 10px

id가 container인 박스의 배경색을 연회색으로

h2요소의 글자색을 베이색으로

span 요소의 글자색을 빨간색으로

h2 바로 다음에 나오는 p요소 속에 있는 span 요소의 글자색을 파란색으로

class가 tea1인 요소의 배경을 베이색으로

 

 

 

 

속성 선택자

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

가상클래스 선택자

링크가 걸린 문자에 스타일을 부여하는 것

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

가상요소 선택자

id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자

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

종속 선택자

type 선택자와 id선택자, class선택자가 결합된 형태
<p id="atxt">선택자의 다양한 표현</p>

선택자의 우선순위

같은 선택자가 여러 CSS 명령을 중복으로 받으면 운선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높습니다.

선택자	우선순위
전체 선택자 ( * )	0
type 선택자(p, h1, ul, ...)	1
가상 선택자(:first-child,...)	10
class 선택자 (.abc,...)	10
id 선택자 (#abc, ...)	100

요소에 직접 style="" 형식으로 CSS를 기술하는 인라인 스타일은 위의 모든 선택자보다 우선으로 실행됩니다.

지금까지 나온 방법보다 최우선으로 CSS를 적용해야 할 경우에는 선택자에 속성을 부여하는 마지막에 "!important"를 붙이면 됩니다.