CSS 선택자(CSS Selectors)란?

ⓒ https://pixabay.com/

 

 

CSS 선택자는 HTML 요소를 스타일링할 때 어떤 요소에 적용할지를 지정하는 데 사용됩니다.

선택자는 HTML 문서의 특정 요소를 선택하여 스타일 규칙을 적용할 수 있도록 해주는 중요한 도구입니다.

다양한 유형의 선택자가 존재하며, 각 선택자는 서로 다른 방식으로 요소를 선택할 수 있습니다.

---

 

1️⃣ 기본 선택자

태그 선택자 (Type Selector): 특정 태그 이름을 가진 요소를 선택합니다. 예를 들어 p 태그는 모든 <p> 요소를 선택합니다.

p {
  color: blue;
}

 

클래스 선택자 (Class Selector): 특정 클래스 속성을 가진 요소를 선택합니다. 클래스는 HTML 요소의 class 속성에 지정됩니다.

.classname {
  color: red;
}

 

아이디 선택자 (ID Selector): 특정 아이디를 가진 요소를 선택합니다. 아이디는 HTML 요소의 id 속성에 지정되며, 문서 내에서 유일해야 합니다.

#elementid {
  background-color: yellow;
}

 

---

 

2️⃣ 복합 선택자

자손 선택자 (Descendant Selector): 특정 부모 요소의 자손인 모든 요소를 선택합니다. 공백으로 구분하여 작성합니다.

div p {
  font-size: 16px;
}

 

자식 선택자 (Child Selector): 바로 다음 자식 요소만 선택합니다. > 기호를 사용합니다.

div > p {
  margin: 10px;
}

 

형제 선택자 (Sibling Selector): 같은 부모를 가진 형제 요소 중에서 특정 요소를 선택합니다.

• 인접 형제 선택자 (+): 바로 다음에 오는 형제 요소만 선택합니다.

h1 + p {
  color: green;
}

 

• 일반 형제 선택자 (~): 뒤에 나오는 모든 형제 요소를 선택합니다.

h1 ~ p {
  color: orange;
}

 

---

 

3️⃣ 속성 선택자 (Attribute Selector)

속성 선택자는 특정 속성을 가진 요소를 선택합니다.

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

 

부분 문자열이 일치하는 속성 선택

• [attribute^="value"]: 속성이 특정 값으로 시작하는 요소 선택
• [attribute$="value"]: 속성이 특정 값으로 끝나는 요소 선택
• [attribute*="value"]: 속성이 특정 값이 포함된 요소 선택

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

img[src$=".jpg"] {
  border: none;
}

 

---

 

4️⃣ 의사 클래스 (Pseudo-Classes) 및 의사 요소 (Pseudo-Elements)

의사 클래스 (Pseudo-Class): 특정 상태에 있는 요소를 선택합니다.

• :hover: 마우스를 올렸을 때
• :focus: 포커스가 되었을 때
• :nth-child(n): n번째 자식 요소 선택

a:hover {
  text-decoration: underline;
}

li:nth-child(2) {
  font-weight: bold;
}

 

의사 요소 (Pseudo-Element): 요소의 특정 부분을 선택합니다.

• ::before: 요소의 앞에 내용 추가
• ::after: 요소의 뒤에 내용 추가

p::before {
  content: "Note: ";
  font-weight: bold;
}

p::after {
  content: " End.";
}

 

---

 

상황에 맞는 선택자를 사용하여

생산성을 높여 stylesheet를 작성할 수 있습니다!

 

꼭 기억하시어 누구보다 빠른 css코딩 습관

만들어가요 ~!