Type Selector
Type Selector는 HTML 태그 이름을 사용하여 스타일을 적용하는 선택자입니다. 예를 들어, 다음과 같은 코드가 있다면:
<p>이것은 문단입니다.</p><p>는 HTML의 문단 태그이므로, 해당 요소에 스타일을 적용하려면 Type Selector를 사용할 수 있습니다.
id selector
id 선택자는 HTML 요소에 고유한 식별자(id)를 지정하여 해당 요소에 스타일을 적용하는 선택자입니다. id는 문서 내에서 오직 하나의 요소에만 적용할 수 있으며, 다른 요소와 중복해서 사용할 수 없습니다.
<div id="my-div">내용</div>class selector
class 선택자는 HTML 요소에 클래스(class)를 지정하여 해당 클래스를 가진 모든 요소에 스타일을 적용하는 선택자입니다. class는 여러 요소에 중복해서 적용할 수 있으며, 동일한 클래스를 가진 여러 요소에 스타일을 일괄 적용할 수 있습니다.
<div class="my-div">내용</div>
전체 selector
전체 선택자는 HTML 문서 내 모든 요소를 선택하는 선택자입니다. 이 선택자는 *을 사용하여 표시합니다.
예를 들어, 아래와 같은 CSS 코드에서 전체 선택자는 모든 요소에 스타일을 적용하게 됩니다.
* {
/* 스타일 속성 */
}
하위 selector
하위 선택자는 선택자 사이에 공백을 사용하여 부모 요소와 자식 요소의 관계를 나타내는 선택자입니다.
자식 selector
자식 선택자는 > 기호를 사용하여 부모 요소와 직접적으로 관련된 자식 요소를 선택하는 CSS 선택자입니다.
인접 selector
인접 선택자는 + 기호를 사용하여 선택한 요소 바로 다음에 위치한 형제 요소를 선택하는 CSS 선택자입니다.
.selected + li {
/* 스타일 속성 */
}
형제 selector
형제 선택자는 ~ 기호를 사용하여 선택한 요소 뒤에 위치한 모든 형제 요소를 선택하는 CSS 선택자입니다.
.selected ~ li {
/* 스타일 속성 */
}
그룹 selector
쉼표(,)를 이용하여 여러 개의 선택자를 그룹화하는 선택자이다. 그룹 내의 모든 선택자에 동일한 스타일을 적용할 수 있다.
속성 selector
HTML 요소의 속성(attribute)에 따라 선택하는 선택자이다. [속성이름] 또는 [속성이름="값"]과 같은 형태로 사용할 수 있다.
가상 클래스 selector
HTML 요소의 상태에 따라 선택하는 선택자이다. 예를 들어, :hover와 같이 링크 요소가 마우스 오버 상태인 경우 선택하는 선택자이다.
가상 요소 selector
HTML 요소의 특정 부분에 스타일을 적용하는 선택자이다. 예를 들어, ::before와 ::after와 같은 가상 요소를 선택하는 선택자이다.
종속 selector
여러 개의 선택자를 조합하여 특정 요소를 선택하는 선택자이다. 종속 선택자에는 자손 선택자(Descendant Selector), 자식 선택자(Child Selector), 인접 형제 선택자(Adjacent Sibling Selector), 형제 선택자(Sibling Selector)가 있다.
선택자의 우선순위
CSS 스타일 규칙이 적용되는 우선순위를 결정하는 방법이다. 선택자의 우선순위는 다음과 같은 순서로 결정된다.
- !important 규칙
- 인라인 스타일
- ID 선택자
- 클래스 선택자, 속성 선택자, 가상 클래스 선택자
- 요소 선택자, 가상 요소 선택자
- 전체 선택자
일반적으로 !important 규칙은 사용하지 않는 것이 좋다. 선택자의 우선순위가 같은 경우, 마지막에 나오는 스타일 규칙이 우선순위가 높다.
댓글