Leeyanggoo
[CSS] 선택자(Selector)를 알아보자!! 본문
선택자Selector
CSS의 선택자는 스타일을 적용할 HTML 요소를 선택하여 디자인할 때 사용합니다.
이 예문은 p 요소 안의 텍스트는 빨간색으로 지정하고, 내부 여백을 5px을 준다는 의미를 담고 있습니다.
중괄호({ }) 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 '세미 콜론(;)'으로 구분합니다.
타입 선택자type selector
See the Pen CSS_selector_1 by leeyanggoo (@leeyanggoo) on CodePen.
type 선택자는 HTML 문서의 태그 이름을 선택자로 사용할 수 있습니다.
위의 예제는 p 태그 안의 텍스트를 빨간색으로 표시하는 속성을 부여하고 있습니다.
아이디 선택자id selector
CSS의 선택자는 HTML 요소 중 같은 요소일지라도 각자 다른 속성을 부여할 때 사용합니다.
그중 id 선택자는 여러 요소 중 특정한 이름을 부여하는 선택자이며 중복해서 사용할 수 없습니다.
See the Pen CSS_id by leeyanggoo (@leeyanggoo) on CodePen.
id 선택자는 HTML 요소 태그의 시작에 <p id="name">과 같이 붙여서 나타냅니다.
또한 id 선택자의 이름은 숫자로 시작할 수 없고, 주로 영문자로 시작합니다.
클래스 선택자class selector
class 선택자는 HTML 요소 중 같은 이름을 갖는 특정한 집단을 모아 속성을 부여하는 선택자입니다.
즉 특정 집단을 class라고 표현하는 것이며, 여러 개의 요소에 같은 class 이름을 부여할 수 있습니다.
See the Pen CSS_class by leeyanggoo (@leeyanggoo) on CodePen.
class 선택자는 HTML 요소 태그의 시작에 <p class="name">과 같이 붙여서 나타냅니다.
class 선택자 또한 이름은 숫자로 시작할 수 없고, 주로 영문자로 시작합니다.
class 선택자는 요소가 다른 HTML 태그들에 속성을 부여할 수 있으며, 하나만 사용할 수도 있습니다.
위의 예시는 서로 다른 태그인 <h2>와 <p> 태그에 같은 "special"이라는 calss이름을 부여함으로써 color: red라는 속성을 부여했으며, class 이름이 다른 <p class=normal> 태그의 요소는 영향을 받지 않은 것을 볼 수 있습니다.
전체 선택자universal selector
See the Pen CSS_selector_2 by leeyanggoo (@leeyanggoo) on CodePen.
전체 선택자는 페이지의 모든 요소를 가리키는 선택자로서 " * "로 표시합니다.
위의 예시는 h1 태그든 p 태그든 상관없이 모든 페이지 요소를 빨간색으로 표시하고 있습니다.
하위 선택자descendant combinator
See the Pen CSS_selector_3 by leeyanggoo (@leeyanggoo) on CodePen.
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백" "으로 분리합니다.
위의 예시는 contents 클래스 내부의 모든 p 태그들의 텍스트를 빨간색으로 표시하도록 속성을 부여하고 있습니다.
자식 선택자child combinator
See the Pen CSS_selector_4 by leeyanggoo (@leeyanggoo) on CodePen.
자식 선택자는 요소 내부에 있는 모든 하위 요소가 아닌 해당 요소를 가리키는 선택자입니다.
자식 선택자는 선택자 사이를 " > "으로 분리하고 가리킵니다.
위의 예시는 contents 클래스의 자식 요소 중 p 태그만을 가리키고 있습니다.
인접 선택자adjacent sibling combinator
See the Pen CSS_selector_5 by leeyanggoo (@leeyanggoo) on CodePen.
인접 선택자는 현재 요소의 바로 뒤에 나오는 요소만을 가리키는 선택자이며, 선택자 사이를 " + "로 분리합니다.
위의 예시는 div 태그 뒤의 p 태그를 빨간색으로 표시하며, 두 번째 p 태그는 해당되지 않는 걸 보여줍니다.
형제 선택자general sibling combinator
See the Pen CSS_selector_6 by leeyanggoo (@leeyanggoo) on CodePen.
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택하며, 선택자 사이를 " ~ "로 구분합니다.
위의 예시는 div 태그와 같은 계층에 있는 p 태그만을 선택하고 있습니다.
따라서 div 태그 속에 있는 p 태그는 속성이 부여되지 않습니다.
그룹 선택자grouping selector
See the Pen CSS_selector_7 by leeyanggoo (@leeyanggoo) on CodePen.
그룹 선택자는 여러 선택자들을 " , "로 구분하여 함께 묶어 속성을 부여합니다.
위의 예시는 div 태그와 p 태그를 묶어서 속성을 부여하고 있습니다.
속성 선택자attribute selector
| 속성 값 | 속성 설명 |
| dvi[class] | class명을 가진 div 요소 |
| img[alt] | alt 속성을 가진 img 요소 |
| div[class="nav"] | class명이 유일하게 "nav"인 div 요소 |
| div[class~="nav"] | class명이 유일하게 "nav"이거나 여러 개의 class명 중 하나가 "nav"인 div 요소 |
| div[class|="nav"] | class명이 "nav"이거나 "nav-"로 시작하는 div 요소 |
| div[class^="nav"] | class명이 철자 "nav"로 시작하는 div요소 |
| div[class$="nav"] | class명이 철자 "nav"로 끝나는 div 요소 |
| div[class*="nav"] | class명에 철자 "nav"가 포함되어 있는 div 요소 |
| a[href^="nav"] | href 속성 값이 "nav"로 시작하는 a 요소 |
HTML 요소의 속성 유무 또는 속성 값을 대괄호([ ]) 안에 넣어 선택자로 사용할 수 있습니다.
위와 같이 속성 선택자는 여러 방면으로 쓰일 수 있습니다.
See the Pen CSS_selector_8 by leeyanggoo (@leeyanggoo) on CodePen.
위의 예시는 각각의 속성 선택자의 해당하는 부분들을 만든 것입니다.
<style>의 속성을 부여하는 태그와 <body> 속 요소들의 id, class 이름을 대조해보면 더욱 이해하기 쉽습니다.
가상클래스 선택자pseudo class selector
| 속성 값 | 속성 설명 |
| a:link | 링크가 걸린 문자에 속성을부여하는 선택자 |
| a:visited | 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자 |
| a:hover | 링크가 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 |
| a:active | 링크가 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만 경우) |
| a:focus | 링크가 걸린 글자의 포커스가 생길 경우의 속성을 부여하는 선택자 (키보드의 [Tab] 키 등으로 포커스가 나타날 경우) |
가상클래스 선택자는 링크가 걸린 문자에 스타일을 부여합니다.
가상클래스를 둘 이상 적용할 경우 위의 순서대로 기술합니다.
See the Pen CSS_selector_9 by leeyanggoo (@leeyanggoo) on CodePen.
위의 가상클래스 선택자 설명에 따라 모든 링크는 먼저 '검은색'으로 표시되지만, 이미 방문한 현재 포스팅 링크는 '빨간색'인 것을 볼 수 있습니다.
또한 마우스를 가져다 대면 '노란색'으로, result의 배경을 누른 뒤 탭을 하면 링크 글자는 '흰색 배경'으로, 텍스트 박스는 '검은색 배경'으로 변하는 걸 볼 수 있습니다.
가상요소 선택자pseudo element selector
| 속성 값 | 설명 |
| :first-letter | 요소의 첫 글자 |
| :first-line | 요소의 첫 줄 |
| :first-child | 같은 요소 중 첫 번째 요소 |
| :last-child | 같은 요소 중 마지막 요소 |
| :nth-child(n) | 같은 요소 중 n번째 요소 |
| :before | 요소 안 맨 앞에 배치될 요소 (마크업에 없는 가상 요소) |
| :after | 요소 안 맨 뒤에 배치될 요소 (마크업에 없는 가상 요소) |
See the Pen CSS_selector_10 by leeyanggoo (@leeyanggoo) on CodePen.
가상요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자입니다.
:before나 :after는 마크업 당시에 없었던 요소를 CSS에서 넣을 때 사용합니다.
새로 된 공간에 내용을 넣을 땐 "content" 속성을 이용하여 기술합니다.
종속 선택자cascading Style Sheets
<p id="text">선택자의 다양한 표현</p>
종속 선택자는 type 선택자와 id 선택자, class 선택자가 결합된 형태입니다.
위와 같은 마크업이 있을 때 #text와 p#text는 같은 선택자이지만 둘의 우선순위는 다릅니다.
다음에서 자세히 살펴보겠습니다.
선택자의 우선순위
| 선택자 | 우선순위 |
| 전체 선택자( * ) | 0 |
| type 선택자 (p, h1, ul, ...) | 1 |
| 가상 선택자(:first-child, ...) | 10 |
| class 선택자(.header, .nav ...) | 10 |
| id 선택자(#header, #nav ...) | 100 |
위의 표는 같은 선택자가 여러 CSS 속성을 중복으로 받았을 때 어떤 선택자가 우선인지를 표기한 것입니다.
또한 같은 우선순위에 있더라도 나중에 기술한 것이 우선순위가 높습니다.
요소에 직접 style=" " 형식으로 CSS를 기술하는 인라인 스타일(inline style)은 위의 모든 선택자보다 우선으로 실행됩니다.
지금까지 나온 방법보다 최우선으로 적용해야 하는 경우는 부여하는 속성 마지막에 "!important"를 붙이면 됩니다.
따라서 전체 우선순위는 다음과 같습니다.
Type 선택자 < class 선택자, 가상 선택자 < id 선택자 < inline style < !important
