[CSS] 선택자 Selector 정리

초심 찾기 운동겸 내일배움캠프 강의인 HTML, CSS, JavaScript 강의를 듣고 있는데
대부분의 초심자 강의와 비슷하게 엄청 자세한 설명은 없기도 하고
예전에 헷갈렸던 선택자를 다시 정리를 해볼려고 한다.
외울려고 하는 것은 아니지만 그래도 한번 보고 넘어가면 좋을 것 같아서 정리!

---

CSS 선택자 완벽 정리

CSS 선택자(selector) 는 원하는 HTML 요소를 정확하게 지정하여 스타일을 적용할 수 있다.

1. CSS 선택자란?

CSS 선택자는 HTML 문서에서 특정 요소를 선택해 스타일을 적용할 수 있도록 도와줍니다. 선택자를 잘 활용하면 코드의 재사용성과 유지보수성이 크게 향상됩니다.

---

2. 기본 선택자

2.1. 전체 선택자 (*)

• 문서 내의 모든 요소를 선택

  * {
    margin: 0;
    padding: 0;
  }

2.2. 타입 선택자

• 특정 태그명을 가진 요소를 선택. 아래 예시는 모든 p 태그에 스타일을 적용한 것.

  p {
    margin: 0;
    padding: 0;
  }

2.3. 클래스 선택자 (.classname)

• HTML 요소에 부여된 클래스 이름을 기반으로 선택

  .highlight {
    background-color: yellow;
  }

2.4. 아이디 선택자 (#idname)

• 고유한 아이디를 가진 요소를 선택

  #header {
    background-color: blue;
  }

---

3. 조합자 (Combinators)

3.1. 자손 선택자 (Child Selector)

• 특정 요소의 모든 하위 요소를 선택. 여러 단계에 중첩되어있어도 모두 선택됨.

  /* .container 클래스 내부에 있는 모든 p 태그 선택 */
  .container p {
    color: #333;
  }

3.2. 자식 선택자 (Child Selector)(>)

• 특정 요소의 직계 자식 요소만 선택. 자손은 선택X

  /* ul 태그의 바로 아래에 있는 li 태그만 선택 */
  ul > li {
    list-style-type: square;
  }

3.3. 인접 형제 선택자 (Adjacent Sibling Selector)(+)

• 특정 요소 바로 다음에 오는 인접한 형제 요소만 선택.

  /* h2 요소 바로 다음에 오는 p 요소 선택. 그 다음에 나타나는 p태그는 적용X */
  h2 + p {
    margin-top: 0;
  }

3.4. 일반 형제 선택자 (General Sibling Selector)(~)

• 특정 요소 이후에 위치한 모든 형제 요소를 선택.

  /* h2 요소 이후에 나오는 모든 p 요소 선택 */
  h2 ~ p {
    color: gray;
  }

---

4. 속성 선택자

HTML 요소에 부여된 특정 속성이나 속성값을 기준으로 요소를 선택. 클래스나 아이디 외에도 다양한 조건으로 스타일을 적용할 수 있음.

4.1. 기본 속성 선택자

• 특정 속성이 존재하는 요소를 선택

  /* 모든 input 요소 중 type 속성이 존재하는 요소 선택 */
  input[type] {
    border: 1px solid #ccc;
  }

4.2 정확한 값 선택

• 특정 속성이 지정한 값과 정확히 일치하는 요소 선택

  /* type 속성이 "text"인 input 요소 선택 */
  input[type="text"] {
    background-color: #f9f9f9;
  }

4.3 부분 일치 선택자

  /* href 속성이 "https"로 시작하는 a 요소 선택 */
  a[href^="https"] {
    color: green;
  }
  /* src 속성이 ".png"로 끝나는 img 요소 선택 */
  img[src$=".png"] {
    border: 2px solid blue;
  }
  /* class 속성에 "active"라는 단어가 포함된 요소 선택 */
  [class*="active"] {
    font-weight: bold;
  }

4.4 기타

  /* class 속성에 단어 단위로 "menu"가 포함된 요소 선택 */
  [class~="menu"] {
    padding: 5px;
  }
  /* lang 속성이 "en" 또는 "en-"로 시작하는 요소 선택 */
  [lang|="en"] {
    font-style: italic;
  }

---

5. 가상 클래스와 가상 요소

특정 상태나 부분에 스타일을 적용할 때 사용

5.1 가상 클래스 (Pseudo-classes)

• 요소의 특정 상태(예: 마우스 오버, 포커스, 활성 상태 등)에 스타일을 적용

  /* 마우스가 요소 위에 있을때 */
  a:hover {
    color: red;
  }
  /* 입력 요소가 포커스를 받을 때 */
  input:focus {
    outline: none;
    border-color: blue;
  }
  /* 클릭 중인 요소 */
  button:active {
    background-color: darkgray;
  }

5.2. 가상 요소 (Pseudo-elements)

• 요소의 특정 부분(예: 첫 줄, 첫 글자, 가상 컨텐츠 등)에 스타일을 적용

  /* 문단의 첫 번째 줄에 스타일 적용 */
  p::first-line {
    font-weight: bold;
  }
  /* 요소의 앞뒤에 가상 컨텐츠를 추가해 인용문 효과를 줄 수 있음 */
  .quote::before {
    content: "“";
  }
  .quote::after {
    content: "”";
  }

---

6. 고급 선택자

6.1. 그룹화 선택자 (Grouped Selectors)

• 여러 선택자에 스타일 적용

  h1, h2, h3 {
    margin-bottom: 10px;
  }

6.2. 부정 선택자

• 특정 조선에 대한하기 앉는 요소를 선택

  /* .primary 클래스를 제외한 모든 버튼 선택 */
  button:not(.primary) {
    background-color: gray;
  }

6.3. 구조적 가상 클래스

/* 부모 요소 내 첫 번째 자식 요소레 스타일 적용 */
li:first-child {
  font-weight: bold;
}
/* 부모 요소 내 마지막 자식 요소에 스타일 적용 */
li:last-child {
  border-bottom: none;
}
/* 홀수번째 자식에 배경색 적용 */
li:nth-child(odd) {
  background-color: #f0f0f0;
}
/* 동일 타입 요소 중 두 번째 p 태그 선택 */
p:nth-of-type(2) {
  color: blue;
}

---

css 복잡하긴 하지만 알고나면 정말 재미있는 부분인 것 같다.
내마음대로 화면이 바뀌는것도 재미있고..
최근엔 계속 tailwind CSS 를 써서 선택자가 잘 생각이 안났는데
전체적인 내용 정리할겸 공부해봤다!