CSS 선택자
선택자란 CSS로 UI의 어느 부분을 디자인할지, 표현할 대상이 되는 부분을 말합니다.
CSS로 속성을 부여하는 형식은 { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 입력해도 무방합니다.
앞서 다른 블로그에서 id 선택자와 class 선택자에 대해 미리 알아보았습니다.
지금 이 블로그에서는 선택자의 모든 종류에 대해 간략하게 알아보겠습니다
선택자의 종류로는 type 선택자, id 선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자 와 선택자의 우선순위가 있습니다.
그럼 이제 알아보도록 하시죠!!!
type 선택자
html 문서의 태그 이름을 선택자로 사용할 수 있습니다.
See the Pen type 선택자 by dongjin6539 (@dongjin6539) on CodePen.
id 선택자
HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로속성을 부여할 수 있습니다.
HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 ID명을 또 주어서는 안됩니다.
CSS에서는 id 선택자 앞에 ' 샵( # ) ' 을 붙여야 합니다.
단, 숫자로 시작할 수 없으며, 주로 영문자로 시작합니다.
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
class 선택자
HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 석성을 부여할 수 있습니다. HTML 요소에 같은 이름을 부여할 때에는 class로 이름을 붙입니다. 즉, 여러개의 요소에 같은 class 명을 부여할 수 있습니다. 또한 하나의 요소에 여러 개의 class 명을 부여할 수도 있습니다. CSS에서는 class 선택자 앞에 ' 점( . ) ' 을 붙여야 합니다.
See the Pen class 선택자 by dongjin6539 (@dongjin6539) on CodePen.
전체 선택자
전체 선택자는 페이지의 모든요소를 가리키는 선택자로서 ' * ' 로 표시합니다.
어떤 id 명이나 class 명이 부여되었든 상관없이, 모든 요소를 표시하도록 속성을 부여한다.
See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen.
하위 선택자
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다.
하위 선택자는 "부모 요소 하위의 자식 요소"를 선택하는 데 사용됩니다. 이를 위해서는 부모 요소를 선택한 다음에 하위 선택자를 사용하여 해당 부모 요소의 하위 요소를 선택합니다.
See the Pen 하위 선택자 by dongjin6539 (@dongjin6539) on CodePen.
자식 선택자
자식 선택자는 CSS에서 사용되는 선택자 중 하나로, 부모 요소의 직계 자식 요소를 선택하는 방법입니다.
자식 선택자는 요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않으며 선택자 사이를 ' > ' 으로 분리합니다.
See the Pen 자식 선택자 by dongjin6539 (@dongjin6539) on CodePen.
인접 선택자
인접 선택자는 CSS에서 사용되는 선택자 중 하나로, 특정 요소의 인접한 형제 요소를 선택하는 데 사용됩니다.
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자로, 선택자 사이를 ' + ' 로 분리합니다.
See the Pen 인접 선택자 by dongjin6539 (@dongjin6539) on CodePen.
형제 선택자
형제 선택자는 CSS에서 두 개의 요소 중에서 첫 번째 요소 다음에 바로 나오는 두 번째 요소를 선택하는 선택자입니다.
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며 ' ~ ' 로 구분합니다.
See the Pen 형제 선택자 by dongjin6539 (@dongjin6539) on CodePen.
그룹 선택자
그룹 선택자는 CSS에서 여러 요소를 그룹화하여 스타일을 적용할 때 사용됩니다.
여러 개의 요소에 대해 동일한 스타일을 적용할 경우에 유용합니다.
이를 통해 코드의 가독성을 높이고 스타일링 작업을 간편하게 할 수 있습니다.
그룹 선택자는 여러 선택자들을 ' , ' 로 구분하여 함께 묶어 속성을 부여하는 것입니다.
See the Pen 그룹 선택자 by dongjin6539 (@dongjin6539) 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 요소 |
See the Pen 속성 선택자 by dongjin6539 (@dongjin6539) on CodePen.
가상클래스 선택자
가상클래스 선택자란 링크가 걸린 문자에 스타일을 부여하는 것입니다.
가상클래스 선택자는 콜론( : )으로 시작합니다.
| 속성 값 | 설명 |
| a:link | 링크가 걸린문자에 속성을 부여하는 선택자 |
| a:visited | 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자 |
| a:hover | 링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 |
| a:active | 링크 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만 경우) |
| a:focus | 링크 걸린 글자에 포커스가 생길 경우의 속성을 부여하는 선택자 (키보드의 Tab키 등으로 포커스가 나타날 경우) |
See the Pen 가상클래스 선택자 by dongjin6539 (@dongjin6539) on CodePen.
가상요소 선택
가상요소 선택자는 요소에 id 명이나 class 명을부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자입니다.
가상요소 선택자는 콜론(:)으로 표시되며, 해당 요소의 일부분에 대한 스타일을 정의할 수 있습니다.
| 속성 값 | 설명 |
| :first-letter | 요소의 첫 글자 |
| :first-line | 요소의 첫 줄 |
| :first-child | 같은 요소 중 첫 번째 요소 |
| :last-child | 같은 요소 중 마지막 요소 |
| :nth-child(n) | 같은 요소 중 n번째 요소 |
| :before | 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상 요소) |
| :after | 요소 안 맨 뒤에 배치될 요소 (마크업에는 없는 가상 요소) |
See the Pen 가상요소 선택자 by dongjin6539 (@dongjin6539) on CodePen.
종속 선택자
종속 선택자는 type 선택자와 id 선택자, class 선택자가 결합된 상태입니다.
종속 선택자는 다른 요소의 자식 요소, 후손 요소, 형제 요소 등을 선택할 수 있습니다.
종속 선택자는 " " (공백)으로 표시됩니다. 이것은 하나의 요소 안에 다른 요소가 있을 때 사용됩니다.
See the Pen 종속 선택자 by dongjin6539 (@dongjin6539) on CodePen.
선택자의 우선순위
같은 선택자가 여러 CSS 명령을 중복으로 받으면 어떤 일이 일어날까요? 일반적으로 우선순위가 같은 선택자라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높습니다.
요소에 직접 style=" " 형식으로 CSS를 기술하는 인라인 스타일은 위의 모든 선택자보다 우선적으로 실행됩니다. 지금까지 나온 방법보다 최우선으로 CSS를 적용해야 할 경우에는 선택자에 속성을 부여하는 마지막에 "!important;"를 붙이면 됩니다.
선택자 우선순위
전체 선택자 < type 선택자 < class 선택자, 가상 선택자 < id 선택자 < inline style < !important
