css 선택자와 표기법

 

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

#my-id {
  font-weight: bold;
}

 

2. 클래스 선택자(Class Selector): 특정 클래스를 가진 요소를 선택합니다.

.my-class {
  color: red;
}

 

3. 요소 선택자(Element Selector): 특정 HTML 요소를 선택합니다.

p {
  text-align: center;
}

 

4. 자식 선택자(Child Selector): 부모요소 > 자식요소: 부모 요소의 직계 자식 요소를 선택합니다

.my-class > li (x)

.my-class> ul > li (o)
이 선택자는 클래스 이름이 "my-class"인 요소의 직계 자식인 <ul> 요소를 선택합니다.

<div class="my-class">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

 

5. 그룹 선택자(Group Selector): 여러 선택자를 그룹화하여 동일한 스타일을 적용합니다.

.my-class, my-class2
이 선택자는 클래스 이름이 "my-class" 또는 "my-class2"인 요소를 선택합니다.
예시 HTML:

<div class="my-class">Content 1</div>
<div class="my-class2">Content 2</div>

 

6. 전체 선택자(Universal Selector): 모든 요소를 선택합니다.

* {
  margin: 0;
  padding: 0;
}

 

7. 속성 선택자: tag[attr]

 

7-1. 속성 존재 선택자(Attribute Presence Selector): 특정 속성을 가진 요소를 선택합니다.

a[href] {
  text-decoration: underline;
}

 

7-2. 속성 값 선택자(Attribute Value Selector): 특정 속성의 값을 기반으로 요소를 선택합니다.

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

 

7-3. 비슷한 속성 선택자(Attribute Substring Selector): 특정 속성 값에 특정 문자열이 포함된 요소를 선택합니다.

a[href*="example"] {
  color: orange;
}

 

8. 가상 선택자(Pseudo-selector): 콜론(:)

 

8-1. :hover:마우스가 올라간 상태를 나타내며, 해당 요소에 마우스 호버 시 스타일을 적용합니다.

a:hover {
  text-decoration: underline;
}

 

8-2. :active: 사용자가 요소를 활성화한 상태를 선택합니다. 일반적으로 클릭 시 적용됩니다.

<button class="active-button">Click me</button>

.active-button:active {
  background-color: blue;
}

 

8-3. :visited: 방문한 링크를 선택합니다. 이미 방문한 링크에 특정 스타일을 적용할 수 있습니다.

<a href="#" class="visited-link">Visited link</a>

.visited-link:visited {
  color: purple;
}

 

8-4. :focus: 현재 포커스가 있는 요소를 선택합니다. 일반적으로 키보드 포커스를 받은 입력 요소에 사용됩니다.

<input type="text" class="focus-input">

.focus-input:focus {
  border-color: red;
}

 

 

8-5. :nth-child

:first-child: 해당 요소가 형제 요소 중 첫 번째 자식인 경우 선택합니다.

:last-child: 해당 요소가 형제 요소 중 마지막 자식인 경우 선택합니다.

:nth-child(n): 순서에 따라 요소를 선택합니다.

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.list li:first-child {
  font-weight: bold;
}
.list li:nth-child(2) {
  color: blue;
}
.list li:last-child {
  font-weight: bold;
}

 

*조합하여 사용하기 예시

- 클래스 선택자 + 요소선택자

.my-class A
이 선택자는 클래스 이름이 "my-class"인 요소 내부의 모든 <a> 요소를 선택합니다.

<div class="my-class">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

- 클래스 선택자 + 요소선택자 + 클래스 선택자

.my-class div.my-class2:
이 선택자는 클래스 이름이 "my-class"인 요소 안에서 클래스 이름이 "my-class2"인 <div> 요소를 선택합니다.

<div class="my-class">
  <div class="my-class2">Content 1</div>
  <div>Content 2</div>
  <div class="my-class2">Content 3</div>
</div>

- 클래스 선택자 + 클래스 선택자

.my-class.my-class2:
이 선택자는 클래스 이름이 "my-class"이면서 "my-class2"인 요소를 선택합니다.
예시 HTML:

<div class="my-class my-class2">
  <p>Text 1</p>
</div>