CSS 선택자

CSS 선택자 정리

CSS에서 선택자는 특정 HTML 요소를 선택해 스타일을 적용할 때 사용됩니다. 연결 선택자(조합 선택자)를 통해 특정 관계에 있는 요소들에 스타일을 지정하거나, 속성 선택자와 가상 클래스 선택자를 활용해 다양한 조건과 상황에서 스타일을 적용할 수 있습니다.

---

1. 연결 선택자 (Combinator Selectors)

연결 선택자는 요소 간의 관계를 정의하며, 두 개 이상의 요소를 조합해 특정 요소에만 스타일을 적용합니다.

1.1 하위 선택자 (section p)

• 용도: 선택한 요소 안의 모든 하위 요소에 스타일을 적용합니다.
• 예시: section 요소 안에 있는 모든 p 요소에 적용.

  section p {
    color: blue;
  }

1.2 자식 선택자 (section > p)

• 용도: 선택한 요소의 직계 자식 요소에만 스타일을 적용합니다.
• 예시: section 요소의 자식인 p 요소에만 적용 (하위 요소에는 적용되지 않음).

  section > p {
    color: red;
  }

1.3 인접 형제 선택자 (h1 + p)

• 용도: 선택한 요소 바로 뒤에 오는 첫 번째 형제 요소에 스타일을 적용합니다.
• 예시: h1 바로 뒤에 오는 p 요소에만 적용.

  h1 + p {
    margin-top: 0;
  }

1.4 일반 형제 선택자 (h1 ~ p)

• 용도: 선택한 요소 뒤에 오는 모든 형제 요소에 스타일을 적용합니다.
• 예시: h1 뒤에 나오는 모든 p 요소에 적용.

  h1 ~ p {
    color: green;
  }

---

2. 속성 선택자 (Attribute Selectors)

속성 선택자는 특정 속성을 가진 HTML 요소를 선택하는 방법입니다.

주요 속성 선택자들:

• [attribute]: 해당 속성을 가진 요소를 선택.

  [type] {
    border: 1px solid black;
  }

• [attribute="value"]: 해당 속성의 값이 정확히 일치하는 요소를 선택.

  [type="text"] {
    background-color: yellow;
  }

• [attribute~="value"]: 속성 값이 공백으로 구분된 목록에서 특정 단어를 포함하는 요소를 선택.

  [class~="primary"] {
    color: blue;
  }

• [attribute^="value"]: 속성 값이 특정 값으로 시작하는 요소를 선택.

  [href^="https"] {
    color: green;
  }

• [attribute$="value"]: 속성 값이 특정 값으로 끝나는 요소를 선택.

  [href$=".pdf"] {
    color: red;
  }

• [attribute*="value"]: 속성 값에 특정 값을 포함하는 요소를 선택.

  [title*="important"] {
    font-weight: bold;
  }

---

3. 가상 클래스 선택자 (Pseudo-classes)

가상 클래스 선택자는 특정 상태에 있는 요소에 스타일을 적용할 때 사용됩니다. 가상 클래스는 :로 시작합니다.

3.1 동작 관련 가상 클래스

• :hover: 요소에 마우스를 올렸을 때.

  button:hover {
    background-color: lightblue;
  }

• :focus: 요소가 포커스를 받았을 때.

  input:focus {
    border: 2px solid blue;
  }

• :active: 요소가 활성화되었을 때 (주로 클릭했을 때).

  a:active {
    color: red;
  }

• :visited: 방문한 링크에 적용.

  a:visited {
    color: purple;
  }

3.2 구조 관련 가상 클래스

• :nth-child(n): 요소가 n번째 자식일 때.

  li:nth-child(2) {
    color: red;
  }

• :nth-of-type(n): 특정 타입의 요소가 n번째일 때.

  p:nth-of-type(3) {
    color: green;
  }

• :first-child: 첫 번째 자식 요소일 때.

  p:first-child {
    font-weight: bold;
  }

• :last-child: 마지막 자식 요소일 때.

  p:last-child {
    font-style: italic;
  }

---

4. 가상 요소 선택자 (Pseudo-elements)

가상 요소 선택자는 요소의 특정 부분에 스타일을 적용합니다. ::로 시작합니다.

• ::before: 요소 내용의 앞쪽에 가상 요소를 추가.

  h1::before {
    content: "Note: ";
    color: red;
  }

• ::after: 요소 내용의 뒤쪽에 가상 요소를 추가.

  h1::after {
    content: "!";
    color: blue;
  }

---

5. :root 가상 클래스

• :root는 문서의 최상위 요소인 HTML 루트를 선택합니다. 주로 CSS 변수를 정의할 때 사용합니다.

:root {
  --main-color: #3498db;
}

p {
  color: var(--main-color);
}

---

6. 추가 사항 및 요약

추가할 사항:

1. :not(selector): 특정 선택자를 제외한 요소를 선택.

   p:not(.important) {
     color: gray;
   }

2. :checked: 체크된 상태의 요소를 선택 (주로 체크박스와 라디오 버튼).

   input:checked {
     background-color: green;
   }

3. :disabled: 비활성화된 요소를 선택.

   button:disabled {
     opacity: 0.5;
   }

요약:

• 연결 선택자: 요소 간의 관계를 기반으로 스타일을 지정 (하위, 자식, 형제 관계).
• 속성 선택자: 특정 속성과 값을 기준으로 요소를 선택.
• 가상 클래스 선택자: 특정 상태나 조건에 따라 요소를 선택.
• 가상 요소 선택자: 요소의 특정 부분에 스타일을 적용.
• :root: 문서 루트 요소를 선택해 CSS 변수 등을 정의할 때 사용.

이 내용들을 기반으로 CSS 선택자의 다양한 종류를 잘 활용하면 더욱 효율적인 스타일링이 가능합니다.