[카카오테크캠퍼스 3주차] CSS 개요: 선택자

⏳ 2023. 4. 24. - 2023. 4. 30.

 

기본 선택자

우선순위 : 전체 < 태그 < 클래스 < 아이디

 

전체 선택자

*을 사용하여 모든 요소를 선택

* {
  color: red;
  font-size: 100px;
}

 

태그 선택자

태그로 선택

div {
  color: red;
  font-size: 100px;
}

 

클래스 선택자

.을 사용하여 선택

.box {
  background-color: blue;
  padding: 20px;
}

 

아이디 선택자

#을 사용하여 선택

#box {
  background-color: blue;
  padding: 20px;
}

---

복합 선택자

일치 선택자

선택자를 동시에 만족하는 요소를 선택 : 모든 선택자를 공백없이 작성

div.orange {
  color: orange;
}

div이면서 class가 orange인 요소 선택

 

자식 선택자

선택자의 자식 요소를 선택 : > 사용

ul > .orange {
  color: orange;
}

ul의 자식 요소 중에서 class가 orange인 요소 선택

 

하위(후손) 선택자

선택자의 하위 요소를 선택 : 공백 사용

div .orange {
  color: orange;
}

div의 하위 요소 중에서 class가 orange인 요소 선택

 

인접 형제 선택자

선택자의 다음 형제 요소 하나를 선택 : + 사용

.orange + li {
  color: orange;
}

class가 orange인 요소의 다음 형제 요소 하나를 선택

 

일반 형제 선택자

선택자의 다음 형제 요소 모두를 선택 : ~ 사용

.orange ~ li {
  color: orange;
}

class가 orange인 요소의 다음 형제 요소 모두를 선택

---

가상 클래스 선택자

기본 문법

선택자:가상클래스선택자

 

:focus

기본적으로 focus가 될 수 있는 요소는 html 대화형 컨텐츠(ex. input, a, button 등)에 해당한다.

input:focus {
  background-color: brown;
}

input 요소가 focus되면 선택

<div tabindex="-1"></div>

div는 focus 될 수 없는 요소이지만 tabindex 속성을 사용하면 focus 가능한 요소로 만들 수 있다.

tabindex : tab 키를 사용해 focus할 순서를 지정한다.(값으로는 -1을 권장)

tabindex="-1"?

실은, tabindex에 값으로 0을 주는 것이 탭으로 이동했을 때 요소가 정렬된 순서(논리적 흐름)대로 이동하게 하는 방법이고, tabindex에 값으로 -1을 주는 것은 포커스 받을 수 있는 태그가 탭으로 포커스를 받지 못하게 하는 방법이다.

그럼 왜 강의에서는 동작한 것인가?
→ 탭이 아닌 클릭으로 포커스했기 때문! 값이 -1이지만, tabindex 속성이 있기 때문에 클릭했을 때 포커스가 된다.

 

:nth-child(n)

형제 요소 중 n번째 요소를 선택한다. n은 0부터 시작한다.

<div class="fruits">
  <span>딸기</span> <!-- 1 ❌ -->
  <span>수박</span> <!-- 2 ✅ -->
  <div>오렌지</div> <!-- 3 ✅ -->
  <p>망고</p> <!-- 4 ✅ -->
  <h3>사과</h3> <!-- 5 ✅ -->
</div>

두 번째 요소부터 마지막 요소까지 선택하고 싶을 때 다음과 같이 작성할 수 있다.

.fruits *:nth-child(n + 2) {
  color: red;
}

 

:not(선택자)

선택자가 아닌 요소를 선택한다.

<div class="fruits">
  <span>딸기</span> <!-- ❌ -->
  <span>수박</span> <!-- ❌ -->
  <div>오렌지</div> <!-- ✅ -->
  <p>망고</p> <!-- ✅ -->
  <h3>사과</h3> <!-- ✅ -->
</div>

span 요소를 선택하고 싶지 않을 때 다음과 같이 작성할 수 있다.

.fruits *:not(span) {
  color: red;
}

---

가상 요소 선택자

기본 문법

선택자::가상요소선택자

 

가상의 요소를 만들어서 내용을 삽입한다. -> html의 구조를 단순화할 수 있는 장점이 있다!

.fruits::before {
  content: "바나나";
}

::before은 선택자 요소의 내부 앞에 내용(인라인 요소)을 삽입하고, ::after은 선택자 요소의 내부 뒤에 내용(인라인 요소)을 삽입한다.

두 가상 요소 선택자 모두 content라는 속성을 필요로 한다.

---

속성 선택자

기본 문법

[속성]

 

속성을 포함한 요소를 선택한다.

[type] {
  color: red;
}
[type="password"] {
  color: orange;
}