type선택자
CSS Type Selector는 HTML 요소의 태그 이름을 사용하여 스타일을 적용하는 선택자입니다.
예를 들어, 모든 p 요소에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다.
p {
color: blue;
}위의 예제에서 "p"는 선택자이며, 이 선택자는 모든 "p" 요소를 선택합니다.
Type Selector는 다른 선택자와 함께 사용하여 더 정확한 선택을 할 수 있습니다. 예를 들어, 클래스 선택자와 Type Selector를 결합하여 클래스가 "my-class"이고 태그 이름이 "p"인 요소를 선택하려면 다음과 같이 작성할 수 있습니다.
p.my-class {
color: red;
}id 선택자 (ID Selector)
id 선택자는 HTML 요소의 id 속성을 사용하여 스타일을 적용합니다.
id 선택자는 해시 기호(#)로 시작합니다.
id로 이름을 유일한 이름을 부여해야합니다.
예를 들어, ID가 "my-id"인 요소에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다.
#my-id {
font-size: 20px;
}클래스 선택자 (Class Selector)
클래스 선택자는 HTML 요소의 클래스 속성을 사용하여 스타일을 적용합니다.
클래스 선택자는 마침표(.)로 시작합니다.
여러 개의 요소에 같은 class요소를 부여할 수 있습니다.
하나의 클래스 요소에 여러개의 class명을 부여할 수 있습니다.
예를 들어, 클래스 이름이 "my-class"인 요소에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다.
.my-class {
color: red;
}
전체 선택자
전체 선택자는 모든 HTML 요소를 선택하여 스타일을 적용하는 선택자입니다.
전체 선택자는 별표(*)로 표시됩니다
이 선택자를 사용하면 HTML 문서의 모든 요소에 동일한 스타일이 적용됩니다.
특정 요소에 대한 세부적인 제어가 불가능하므로 가능한 경우에는 전체 선택자를 사용하지 않는 것이 좋습니다.
* {
color: red;
}위와 같이 작성하면 전체 요소의 색은 빨간 색이 됩니다.
하위 선택자
요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다.
div p {
color: blue;
}
ul li {
color: green;
}예제에서 첫 번째 CSS 규칙인 "div p"는 div 요소 안에 있는 모든 p 요소에 대해 글자 색상을 파란색으로 설정합니다.
두 번째 CSS 규칙인 "ul li"는 ul 요소 안에 있는 모든 li 요소에 대해 글자 색상을 초록색으로 설정합니다.
이와 같이 하위 선택자를 사용하면 HTML 문서의 구조를 이용하여 요소를 더욱 세부적으로 선택할 수 있습니다.
자식 선택자
요소 내부에 있는 해당 요소를 가르킵니다.
그러나 하위 요소의 하위요소는 가르키지 않습니다.
부모 요소와 하위 요소 사이에는 ">" 기호를 사용하여 표시합니다.
선택자를 사용하면 하위 요소 중에서도 직계 하위 요소에 대해서만 스타일을 적용할 수 있습니다.
ul > li {
font-weight: bold;
}
ul > li > ul {
list-style: none;
}인접 선택자
특정 요소 바로 다음에 오는 형제 요소를 선택하는 선택자입니다.
인접 선택자는 두 개의 선택자로 이루어져 있으며, 첫 번째 선택자 다음에 "+" 기호를 사용하여 표시합니다.
이 선택자를 사용하면 첫 번째 요소의 바로 다음에 오는 형제 요소에 대해서만 스타일을 적용할 수 있습니다.
<p>Paragraph 1</p>
<h2>Heading 1</h2>
<p>Paragraph 2</p>
<h2>Heading 2</h2>
h2 + p {
font-style: italic;
}위의 예제에서 CSS 규칙인 "h2 + p"는 h2 요소 바로 다음에 오는 p 요소에 대해 글자를 이탤릭체로 설정합니다.
따라서 위의 예제에서 Paragraph 2 요소에 대해서만 이탤릭체 스타일이 적용됩니다.
이와 같이 인접 선택자를 사용하면 특정 요소의 바로 다음에 오는 요소에 대해 스타일을 적용할 수 있습니다.
형제 선택자
특정 요소 다음에 오는 모든 형제 요소를 선택하는 선택자입니다.
형제 선택자는 두 개의 선택자로 이루어져 있으며, 첫 번째 선택자 다음에 "~" 기호를 사용하여 표시합니다.
이 선택자를 사용하면 첫 번째 요소 다음에 오는 모든 형제 요소에 대해서 스타일을 적용할 수 있습니다.
<p>Paragraph 1</p>
<h2>Heading 1</h2>
<p>Paragraph 2</p>
<h3>Heading 2</h3>
<p>Paragraph 3</p>
h2 ~ p {
color: blue;
}그룹 선택자
CSS 그룹 선택자는 여러 개의 요소를 동시에 선택하여 스타일을 적용할 수 있는 선택자입니다.
그룹 선택자는 쉼표(,)로 구분된 여러 개의 선택자로 이루어져 있습니다.
이 선택자를 사용하면 선택된 모든 요소에 대해서 동일한 스타일을 적용할 수 있습니다.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
h1, h2, h3 {
text-align: center;
font-weight: bold;
}위의 예제에서 CSS 규칙인 "h1, h2, h3"는 h1, h2, h3 요소에 대해 글자 정렬을 중앙으로, 글꼴 두께를 굵게 설정합니다.
이와 같이 그룹 선택자를 사용하면 여러 요소에 대해 동일한 스타일을 한 번에 적용할 수 있습니다.
속성 선택자
속성 선택자는 HTML 요소의 특정 속성 값을 사용하여 스타일을 적용합니다.
속성 선택자는 대괄호([]) 안에 속성 이름과 선택자 값을 작성합니다.
예를 들어, "href" 속성 값이 "https://www.example.com"인 a 요소에 스타일을 적용하려면 다음과 같이 작성할 수 있습니다.
a[href="https://www.example.com"] {
text-decoration: none;
}가상 클래스 선택자
가상 클래스 선택자는 링크가 걸린 문자에 스타일을 적용합니다.
가상 클래스 선택자는 콜론(:)으로 시작합니다.
| 속성 값 | 설명 |
| a:link | 링크가 걸린 문자에 속성을 부여하는 선택자 |
| a:visited | 링크를 클릭하여 해당 페이지에 갔다가 들어온 경우의 속성을 부여하는 선택자 |
| a:hover | 링크가 걸린 문자에 마우스가 닿았을 경우 속성을 부여하는 선택자 |
| a:active | 링크 걸린 글자가 활성화 되었을 경우 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다 만 경우) |
| a:focus | 링크 걸린 글자에 포커스가 생길 경우 속성을 부여하는 선택자 (키보드의 [tab] 키 등으로 포커스가 나타날 경우) |
예를 들어, 링크를 방문한 후에 적용되는 가상 클래스 선택자는 다음과 같습니다.
a:visited {
color: purple;
}가상요소 선택자
가상 요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자 입니다.
가상 요소 선택자는 콜론 두 개(::)로 시작합니다.
| 속성 값 | 설명 |
| :first-letter | 요소의 첫 글자 |
| :first-line | 요소의 첫 줄 |
| :first-child | 같은 요소 중 첫번째 요소 |
| :last-child | 같은 요소 중 마지막 요소 |
| nth-child(n) | 같은 요소 중 n번쨰 요소 |
| :before | 요소 안 맨 앞에 배치될 요소 (마크업에는 없는 가상요소) |
| :after | 요소 안 맨 뒤에 배치될 요소(마크업에는 없는 가상요소) |
예를 들어, 요소의 내용 앞에 새로운 콘텐츠를 추가하는 가상 요소 선택자는 다음과 같습니다.
p::before {
content: ">";
}
종속 선택자
종속 선택자는 한 요소의 하위 요소 중에서 특정한 요소를 선택하는 데 사용됩니다.
이 선택자는 공백 문자로 구분된 두 개의 선택자로 이루어져 있습니다.
왼쪽 선택자가 상위 요소를, 오른쪽 선택자가 하위 요소를 나타냅니다.
상위 요소에 대한 참조를 사용하여 하위 요소에 스타일을 적용할 수 있으므로 보다 복잡한 스타일을 적용할 수 있습니다.
<div class="parent">
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</div>
.parent p {
color: blue;
}
".parent p"는 class가 "parent"인 div 요소의 하위 p 요소에 적용됩니다.
따라서 위의 CSS 규칙은 첫 번째 p 요소와 두 번째 p 요소 모두에 대해 글자 색상을 파란색으로 설정합니다.
선택자의 우선순위
같은 선택자가 여러 CSS명령을 중복으로 받을 때 우선으로 실행되는 순위가 있습니다.
Type 선택자<class 선택자, 가상 선택자<id 선택자<inline style<!important부여한 속성이 적용되지 않는다면 이전에 작성한 css중 더 높은 순위를 갖는 선택자가 있었는지 의심해봐야 합니다.
선택자의 우선순위로 인해 많은 난관에 부딪히기도 하고, 반대로 잘 이용하면 어려운 문제의 해법이 되기도 하니
잘 숙지합시다!