# CSS Selectors 비쥬얼 가이드

> Clean Markdown view of GeekNews topic #10374. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=10374](https://news.hada.io/topic?id=10374)
- GeekNews Markdown: [https://news.hada.io/topic/10374.md](https://news.hada.io/topic/10374.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-08-16T10:18:02+09:00
- Updated: 2023-08-16T10:18:02+09:00
- Original source: [fffuel.co](https://fffuel.co/css-selectors/)
- Points: 44
- Comments: 1

## Topic Body

- 일반 CSS 셀렉터부터, Psedo-Class 및 Psedo-Element 들을 이해하기 쉽게 시각적으로 정리  
- Selector: universal / element / class / ID / multiple / descendant / adjacent / child / general sibling  
- comma combinator, lobotomized owl  
- attribute & value   
- link pseudo-class selectors  
- input element(s) : focused / checked / disabled / enabled / valid / invalid / optional   
- child : first / last / nth / backward / only-child   
- type : first-of / last-of / nth-of / backward / only-of   
- target element selector  
- has() parent selector   
- negation pseudo-class  
- pseudo-element: first child / last child / first letter / first line  / list marker  
- text input placeholder / style highlighted box  
- 그외: :root / :is() / :where() / :default / :empty / :fullscreen / :in-range / :out-of-range / :indeterminate / :read-only / :read-write / :lang()

## Comments



### Comment 18278

- Author: semjei
- Created: 2023-08-16T12:11:24+09:00
- Points: 1

오.. 잘 정리되어 있네요.   
바로 옆자리 신입에게 전달하였습니다. ㅎㅎ  
  
아래쪽의 각종 툴들도 재미있는게 많네요.  
좋은 자료 감사합니다.