CSS) Selector 정리 (Basic, Combinators, Pseudo)

Selector(선택자)란, 말 그대로 선택을 해주는 요소를 뜻한다. 특정 요소들을 선택하여 스타일을 적용할 수 있다.

 

Selector 종류에 대해 간단하게 정리한다.

 

들어가기 전에, CSS 문장을 선언하는 규칙인 Rule Set을 살펴보고 들어간다.

 

---

1) Basic selectors

 

- Universal selector

 

>>> 사용법: * { }   /  대상:  모든 태그

* {
  border: 1px solid black;
}

 

- Type selector

 

>>> 사용법: 태그명 { }  / 대상: 지정한 태그명에 해당하는 모든 태그

div {
  width: 100px;
  height: 100px;
  background-color: wheat;
}

 

- Class selector

 

>>> 사용법: .클래스명 { }  /  대상: 해당 클래스명을 가진 모든 태그

.second {
  background-color: tomato;
}

 

- ID selector

 

>>> 사용법: #아이디명 { }  /  대상: 해당 아이디명을 가진 태그 (1개)

#third {
  background-color: turquoise;
}

 

- Attribute selector

 

>>> 사용법: 태그명[속성명="속성값"] { }  /  대상: 해당 속성 및 속성값을 가진 지정한 태그

div[name="fourth"] {
  background-color: grey;
}

---

2) Grouping selectors

 

- Selector list

 

>>> 사용법: 대상을 comma로 나열 후 { }  /  대상: 나열한 대상

#third,
.second,
span {
  font-size: 25px;
}

---

3) Combinators

 

- Descendant combinator

 

>>> 사용법: A B { }  /  대상: A 안에 있는 모든 하위 B (자손, 여러 개)

 

- Child combinator

 

>>>사용법: A > B { }  /  대상: A 태그 바로 다음에 있는 B (자식, 1개)

 

 

- General sibling combinator

 

>>> 사용법: A ~ B { }  /  대상: A 와 동등한 라인에 위치한 모든 B (형제, 여러 개)

 

 

- Adjacent sibling combinator

 

>>> 사용법: A + B { }  /  대상: 첫 번째 태그의 바로 뒤에 위치한 태그 (1개)

 

---

4) Pseudo-classes and pseudo-elements

 

pseudo-classes와 pseudo-elements 는 종류가 다양하므로, 자주 쓰는 대상들만 정리한다.

---

- pseudo-classes

 

 

pseudo-class는 요소의 특정 상태(state)에 선택자(selector)를 추가하는 키워드이다.

위 사진은 pseudo-classes 중 하나인 :hover 를 나타낸 코드이다. state의 변화를 이용하여 코드를 적용한다.

 

왼쪽 박스에 마우스를 올려놓으면 오른쪽 박스처럼 tomato 색으로 변한다.

 

이 외에도 다음과 같은 State들을 활용할 수 있다. 위 예시처럼, state 앞에 : 를 추가하여 사용해야 한다.

 

>>> enabled, disabled, required, visited, nth-child, first-child, last-child, nth-of-type, hover, active, focus, focus-within 등

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo-classes - CSS: Cascading Style Sheets | MDN

---

 

- pseudo-elements

 

 

pseudo-element는 특정 요소의 특정 부분에 스타일링을 할 수 있도록 선택자를 추가하는 키워드이다.

 

 

위 예시처럼, 글의 첫 번째 문자를 크게 만드는 것 등이 있다.

 

이 외에도 placeholder의 글자색을 바꾼다든지, 글을 드래그했을 때 배경색을 바꾸는 것도 가능하다.

 

사용할 때는 요소 뒤에 :: 를 추가하여 사용해야 한다. (많이 사용할 것 같진 않다.)

 

>>> placeholder, selection 등

 

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Pseudo-elements - CSS: Cascading Style Sheets | MDN

 

 

 

---

 

 

 

참고)

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

 

https://nomadcoders.co/kokoa-clone/lectures/1736

 

https://www.nextree.co.kr/p8468/

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements