CSS 선택자 한 번에 완벽 정리

✍🏻CSS 선택자✍🏻

what is CSS 선택자(selector) ?
선택자란 CSS로 UI의 어느 부분을 디자인할지, 표현할 대상이 되는 부분, 즉 선택을 해주는 요소를 말합니다.
이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다.
CSS로 속성을 부여하는 형식은 { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 입력해도 됩니다.

선택자의 종류로는 type 선택자, id 선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자,

형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자 와 선택자의 우선순위가

있습니다.

✍🏻 type 선택자 ✍🏻

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

 

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

 

✍🏻 id 선택자 ✍🏻

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

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

 

✍🏻 class 선택자 ✍🏻

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

HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러개의 요소에 같은 class 명을 부여할 수 있습니다. 또한 하나의 요소에 여러 개의 class 명을 부여할 수도 있습니다. CSS에서는 class 선택자 앞에 ' 점( . ) ' 을 붙여야 합니다.

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

✍🏻 전체 선택자 ✍🏻

전체 선택자는 페이지의 모든요소를 가리키는 선택자로서 ' * ' 로 표시합니다.
어떤 id 명이나 class 명이 부여되었든 상관없이, 모든 요소를 표시하도록 속성을 부여합니다.

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

✍🏻 하위 선택자 ✍🏻

하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다.
하위 선택자는 "부모 요소 하위의 자식 요소"를 선택하는 데 사용됩니다. 이를 위해서는 부모 요소를 선택한 다음에 하위 선택자를 사용하여 해당 부모 요소의 하위 요소를 선택합니다.

 

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

✍🏻 자식 선택자 ✍🏻

자식 선택자는 CSS에서 사용되는 선택자 중 하나로, 부모 요소의 직계 자식 요소를 선택하는 방법입니다.
자식 선택자는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를 ' > ' 으로 분리합니다.

 

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

✍🏻 인접 선택자 ✍🏻

인접 선택자는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 인접한 형제 요소를 선택하는 데 사용됩니다.
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 ' + ' 로 분리합니다.

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

✍🏻 형제 선택자 ✍🏻

형제 선택자는 CSS에서 두 개의 요소 중에서 첫 번째 요소 다음에 바로 나오는 두 번째 요소를 선택하는 선택자입니다.
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며 ' ~ ' 로 구분합니다.

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

✍🏻 그룹 선택자 ✍🏻

그룹 선택자는 CSS에서 여러 요소를 그룹화하여 스타일을 적용할 때 사용됩니다.
여러 개의 요소에 대해 동일한 스타일을 적용할 경우에 유용합니다.
이를 통해 코드의 가독성을 높이고 스타일링 작업을 간편하게 할 수 있습니다.
그룹 선택자는 여러 선택자들을 ' , ' 로 구분하여 함께 묶어 속성을 부여하는 것입니다.

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

✍🏻 속성 선택자 ✍🏻

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

 

속성 값 설명
h1[class] class 명을 가진 h1 요소
img[alt] alt 속성을 가진 img 요소
p[class = "abc"] class 명이 유일하게 'abc'인 p 요소
p[class ~= "abc"] class 명이 유일하게 '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 ^= "mailto"] href 속성값이 'mailto'로시작하는 a 요소

✍🏻 가상 클래스 선택자 ✍🏻

가상클래스 선택자란 링크가 걸린 문자에 스타일을 부여하는 것입니다.
가상클래스 선택자는 콜론( : )으로 시작합니다.

 

속성 값 설명
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 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소)
:after 요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소)

✍🏻 종속 선택자 ✍🏻

종속 선택자는 type 선택자와 id 선택자, class 선택자가 결합된 상태입니다.
종속 선택자는 다른 요소의 자식 요소, 후손 요소, 형제 요소 등을 선택할 수 있습니다.
종속 선택자는 " " (공백)으로 표시됩니다. 이것은 하나의 요소 안에 다른 요소가 있을 때 사용됩니다.

 

✍🏻 선택자의 우선순위 ✍🏻

같은 선택자가 여러 CSS 명령을 중복으로 받으면 어떤 일이 일어날까요? 일반적으로 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높습니다.
요소에 직접 style=" " 형식으로 CSS를 기술하는 인라인 스타일은 위의 모든 선택자보다 우선적으로 실행됩니다. 지금까지 나온 방법보다 최우선으로 CSS를 적용해야 할 경우에는 선택자에 속성을 부여하는 마지막에 "!important;"를 붙이면 됩니다.

✨ 전체 우선순위
전체 선택자 < type 선택자 < class 선택자, 가상 선택자 < id 선택자 < inline style < !important