CSS 선택자

1. CSS 선택자 종류

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 도구이다. 주요 선택자들은 다음과 같다.

1.1 기본 선택자

• 전체 선택자 (*): 모든 요소를 선택합니다.

* {
  margin: 0;
  padding: 0;
}

• 태그 선택자: 특정 HTML 태그를 선택합니다.

p {
  font-size: 16px;
}

• 클래스 선택자 (.): 특정 클래스 이름을 가진 요소를 선택합니다.

.box {
  background-color: lightblue;
}

• 아이디 선택자 (#): 특정 아이디를 가진 요소를 선택합니다.

#header {
  text-align: center;
}

1.2 속성 선택자

• 기본 속성 선택자: 특정 속성을 가진 요소를 선택합니다.

[type="text"] {
  border: 1px solid gray;
}

• 속성 값 포함 여부:

종류
[attr]	속성이 존재하는 요소
[attr="value"]	특정 값을 가진 요소
[attr^="value"]	특정 값으로 시작하는 요소
[attr$="value"]	특정 값으로 끝나는 요소
[attr*="value"]	특정 값을 포함하는 요소

1.3 의사 클래스

• 동적 상태:

종류
:hover	요소에 마우스를 올릴 때
:focus	요소가 포커스를 받을 때

button:hover {
  background-color: lightgray;
}

• 구조:

종류
:first-child	첫번째 자식인 경우
:last-child	마지막 자식인 경우
:nth-child(n)	n번째 자식인 경우

li:first-child {
  color: red;
}

1.4 의사 요소

특정 요소의 특정 부분에 스타일을 적용합니다

종류
::before	요소 앞에 추가된 가상 콘텐츠
::after	요소 뒤에 추가된 가상 콘텐츠

h1::before {
  content: "★ ";
  color: gold;
}

2.CSS 캐스케이딩 (Cascading)과 명시도 (Specificity)

2.1 캐스케이딩

CSS에서 여러 스타일 규칙이 적용될 경우, 캐스케이딩(Cascading) 규칙에 따라 최종 스타일이 결정됩니다.

• 1.사용자 에이전트 스타일 (브라우저 기본값):브라우저가 HTML 요소에 적용하는 기본 스타일.
• 2.외부 스타일: CSS 파일에 정의된 스타일.
• 3.내부 스타일: style 태그 안에 정의된 스타일.
• 4.인라인 스타일:요소의 style 속성에 직접 정의된 스타일. (가장 우선순위 높음)

2.2 명시도

명시도는 CSS 규칙 간의 우선순위를 결정합니다. 계산 방식은 다음과 같습니다

• 인라인 스타일: 1000점
• 아이디 선택자: 100점
• 클래스, 속성 선택자, 의사 클래스: 10점
• 태그 선택자, 의사 요소: 1점

/* 점수: 1 (태그 선택자) */
p {
  color: blue;
}

/* 점수: 10 (클래스 선택자) */
.text {
  color: green;
}

/* 점수: 100 (아이디 선택자) */
#unique {
  color: red;
}

#unique가 적용되어 텍스트는 빨간색이 됩니다.

3.결합자 종류

CSS 결합자는 여러 요소를 결합하여 특정 요소를 선택하는 데 사용됩니다.

3.1 자손 결합자 ( )

특정 요소의 모든 자손 요소를 선택합니다.

div p {
  color: blue;
}

3.2 자식 결합자 (>)

특정 요소의 직계 자식 요소만 선택합니다.

div > p {
  font-weight: bold;
}

3.3 인접 형제 결합자 (+)

특정 요소의 직계 자식 요소만 선택합니다.

h1 + p {
  margin-top: 10px;
}

3.4 일반 형제 결합자 (~)

특정 요소 뒤에 있는 모든 형제 요소를 선택합니다.

h1 ~ p {
  color: gray;
}

5.그룹화 규칙

그룹화 규칙은 여러 요소에 동일한 스타일을 적용할 때 사용됩니다.쉼표를 사용하여 여러 선택자를 그룹화합니다.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

div > p, section > p {
  color: green;
}