CSS - Selector 총정리

CSS - Selector 

1 / 요소, 클래스, ID 선택자

2 / 자식, 자손, 형제 선택자

3 / 구조적 가상 클래스 선택자

4 / 동적 가상 클래스 선택자

 

---

1 / 요소, 클래스, ID 선택자

 

Type Selector

- HTML 태그 이름으로 선택자 작성

span {
   color : #0066ff;
   font-size: 16px;
   font-weight: 500;
}

 

Class Selector

- HTML의 class속성의 속성값을 사용

 

.stop-button {
   color : #0066ff;
   border: none;
}

class는 중복 선언 가능하므로

같은 클래스에 동일한 스타일을 한꺼번에 작성 가능하다.

 

반대로, 한 요소에 여러 클래스를 가질 수도 있다.

만약, class1이면서 class2면서 class3이라면?

 

<div class="class1 class2 class3"> </div>

🔻 class1이면서 class2면서 class3인 선택자 

.class1.class2.class3 {
   color: #fafafa;
}

(띄어쓰기 없이 붙여서 써야함.

만약 띄어쓰기 존재시 하위요소를 의미함.)

 

CSS) 다중 선택자 (Selector) - 선택자가 여러개일 경우

위 포스팅에서 다중 선택자 참고.

 

 

 

ID Selector

* ID = Identifier (식별자)

 

한 ID는 한 요소에만 존재할 수 있음.

(class처럼 중복은 불가능)

#input-form {
   color : #0066ff;
   background-color: #fff;
   border: none;
   border-radius: 10px;
}

 

---

2 / 자식, 자손, 형제 선택자

 

• Child
• Descendant
• Sibling

 

<section>
  <h1>Heading</h1>  
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</section>

위 구조에서

section의 자식 = h1, ul

section의 자손 = h1, ul, li

 

즉, 자식요소는 직계 자손이고

자손요소는 하위요소 전부를 의미함.

 

+) sibling(형제 요소)

 

li는 서로 sibling 요소임.

❗ 부모가 같지 않아도, 레벨이 같으면 형제임.

 

 

** 자식 선택자 : > 기호 사용

parent > child

 

** 자손 선택자 : 띄어쓰기 한칸

parent descendant

 

 

** 형제 선택자 : + 기호 또는 ~ 기호

<ul>
  <li>li1</li>
  <li class="actives">li2</li>
  <li>li3</li>
  <li>li4</li>
  <li>li5</li>
</ul>

이런식으로 마크업되어있을 때,

 

🔻 두번째 li 이후의 형제요소들(즉, li3,4,5)에만 스타일 적용하고 싶다면?

.active ~ li {
   color: #0066ff;
}

 

🔻 두번째 li 다음의 li 한개에만(즉, li3) 스타일을 적용할 때는?

.active + li {
   color: #0066ff;
}

 

 

---

3 / 구조적 가상 클래스 선택자

Psedo-Class (가상 클래스)

: 어떤 상태 or 조건을 만족할 때.

 

 

:first-child

첫 번째 요소일 때 사용.

<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
  <li>list 4</li>
  <li>list 5</li>
</ul>

위와 같은 구조일 때,

총 5개의 li 태그가 존재하는데

이중에서 첫번째 요소 ( = list 1 )를 선택.

li:first-child {
   color: #0066ff;
}

❗ : 앞에 띄어쓰기 하면 안됨. 

 

 

:last-child

마지막 요소 ( = list 5) 선택

li:last-child {
   color: #0066ff;
}

 

+) 추후에 li 추가해도, 항상 마지막 요소에 스타일이 적용된다!

 

 

 

:nth-child(n)

- n번째 요소 선택시.

 

li:nth-child(3) {
   color: #0066ff;
}

>> 주의❗ 이것은 js의 인덱스처럼 0부터 시작하지 않는다.

 

 

+) 홀수, 짝수로 나눌 수도 있다.

li:nth-child(2n-1) {
   color: #ff4949;
}

li:nth-child(2n) {
   color: #0066ff;
}

 

---

4 / 동적 가상 클래스 선택자

User Action Pseudo-Class

 

- 유저가 특정 행동을 했을 때 반응

 

:hover

- 마우스를 위에 올려놨을때 (클릭은 X)

button:hover {
   background-color: #fafafa;
}

 

:active

- 마우스 클릭하는 찰나의 순간에.

button:active {
   background-color: #525252;
}

 

 

:focus

- form 등을 눌러서 포커스를 얻었을때.

- focus됨을 알릴 수 있게.

 

 

input 을 예시로 들면,

우선 input의 디폴트 스타일을 제거하자.

input {
   outline: none;
   box-shadow: none;
}

 

그리고, focus되었을 때 적용할 스타일을 적어줌.

input:focus {
   border-color: #ff4949;
}

 

:link	방문 안한 링크
:visited	방문한 링크
:active	링크 누를때
:hover	링크에 마우스 올릴때
:focus	요소가 포커스될때 (키보드 or 문자입력양식)
:first-child	요소의 첫번째 자식요소
:before	요소 내용 앞에 추가할 태그 지정 (content 속성 필요)
:after	요소 내용 뒤에 추가할 태그 지정 (content 속성 필요)