css-examples/docs/01_선택자.md

CSS 선택자

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용돼. 선택자를 잘 활용하면 코드의 가독성과 유지보수성이 높아져!

선택자
*	전체 선택자
tagname	요소 선택자
.classname	클래스 선택자
#idname	아이디 선택자
A, B, C	그룹 선택자
A > B	자식 선택자
A B	후손 선택자
A + B	인접 형제 선택자
A ~ B	일반 형제 선택자
[attr]	속성 선택자
[attr="value"]	특정 값과 일치
[attr^="value"]	특정 값으로 시작
[attr$="value"]	특정 값으로 끝
[attr*="value"]	특정 값이 포함

기본 선택자 (Basic Selectors)

전체 선택자 (*)

• 문서의 모든 요소를 선택
• 초기화 스타일을 적용할 때 유용

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

요소 선택자 (tagname)

• 특정 HTML 태그에 스타일 적용

p { /* 모든 <p> 태그에 적용됨 */
  color: blue;
  font-size: 18px;
}

클래스 선택자 (.classname)

• 특정 클래스를 가진 요소 선택

.button { /* <button class="button">Click Me</button>에 적용됨 */
  background-color: red;
  color: white;
}

아이디 선택자 (#idname)

• 특정 ID를 가진 요소 선택
• ID는 문서 내에서 고유해야 함!

#header { /* <div id="header"> 요소에 적용됨 */
  background-color: black;
  color: white;
}

그룹 / 결합 선택자 (Grouping & Combinators)

그룹 선택자 (A, B, C)

• 여러 요소에 같은 스타일 적용

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

자식 선택자 (A > B)

• 직접적인 자식 요소만 선택

div > p { /* <div>의 직계 자식 <p>만 스타일 적용됨 */
  color: red;
}

후손 선택자 (A B)

• 자식 + 손자 + 그 이하 모든 후손 요소 선택

div p { /* <div> 안에 있는 모든 <p> 요소에 적용 */
  font-weight: bold;
}

인접 형제 선택자 (A + B)

• 특정 요소 바로 다음에 오는 형제 요소 하나 선택

h1 + p { /* <h1> 다음에 나오는 첫 번째 <p>만 적용됨 */
  color: green;
}

일반 형제 선택자 (A ~ B)

• 특정 요소 뒤에 나오는 모든 형제 요소 선택

h1 ~ p { /* <h1> 뒤에 나오는 모든 <p>에 적용됨 */
  font-style: italic;
}

속성 선택자 (Attribute Selectors)

특정 속성이 있는 요소 선택 ([attr])

input[required] { /* <input required> 필드에 빨간 테두리 적용 */
  border: 2px solid red;
}

특정 값과 일치하는 속성 선택 ([attr="value"])

input[type="password"] { /* <input type="password"> 필드 배경색 변경 */
  background-color: lightgray;
}

특정 값으로 시작하는 속성 선택 ([attr^="value"])

a[href^="https"] { /* href가 "https"로 시작하는 모든 링크 선택 */
  color: blue;
}

특정 값으로 끝나는 속성 선택 ([attr$="value"])

img[src$=".jpg"] { /* .jpg로 끝나는 이미지에 둥근 테두리 적용 */
  border-radius: 10px;
}

특정 값이 포함된 속성 선택 ([attr*="value"])

div[class*="box"] { /* class에 "box"가 포함된 모든 <div>에 적용됨 */
  border: 1px solid black;
}

가상 클래스 (Pseudo-classes)

링크 상태에 따라 스타일 적용

a:link { color: blue; }   /* 방문하지 않은 링크 */
a:visited { color: purple; } /* 방문한 링크 */
a:hover { color: red; }   /* 마우스 올릴 때 */
a:active { color: orange; } /* 클릭 중 */

:first-child / :last-child

부모 요소의 첫 번째/마지막 자식 요소에 적용

p:first-child {
  font-weight: bold;
}
p:last-child {
  color: gray;
}

:nth-child(n)

li:nth-child(odd) { background: lightgray; }
li:nth-child(3) { color: red; }
/* 홀수 번째 li는 회색, 세 번째 li는 빨강 */

:not(selector) (특정 요소 제외)

button:not(.disabled) {
  background-color: green;
}
/* .disabled 클래스를 제외한 모든 <button>에 적용 */

가상 요소 (Pseudo-elements)

::before / ::after (가상 요소 추가)

p::before {
  content: "🔥 ";
}
p::after {
  content: " ✅";
}
/* <p> 태그 앞뒤에 가상 요소 추가 */

::first-letter / ::first-line

p::first-letter {
  font-size: 2em;
  color: red;
}

p::first-line {
  font-weight: bold;
}
/* 첫 글자는 크게, 첫 줄은 굵게 */

고급 선택자 (Advanced Selectors)

:focus-within (자식 요소가 포커스를 가질 때)

form:focus-within { /* 폼 내부 요소가 포커스를 받으면 배경색 변경 */
  background: lightyellow;
}

:has(selector) (부모 요소 선택)

article:has(img) { /* <img>가 포함된 <article>에 테두리 추가 */
  border: 2px solid blue;
}