Million_Air님 편의를 위해 선택자, 결합자와 Class가 같이 서술되어 있습니다.
각 항목의 제목을 클릭하면 해당되는 주제의 추가 설명을 위해 이동됩니다.
브라우저 호환성: ( IE는 공식적으로 지원 종료 되었으므로 표시하지 않음 )
1. 전체 선택자: *
* 선택자는 페이지의 모든 요소를 대상으로 합니다.
ex) *:focus { outline: none !important; } /* 모든 항목의 focus시 아웃라인 제거 */
물론 자식 selector에서도 사용할 수 있습니다.
ex) #main #main-menu>*:last-child { padding: 0; }
주의: 과도한 * 선택자의 사용은 웹 브라우저의 성능을 떨어뜨릴 수 있습니다.
2. ID 선택자: #X
# 선택자는 특정 ID의 단일 요소를 대상으로 합니다.
ex) #board-info { margin: 0; }
3. Class 선택자: .X
. 선택자는 특정 class의 모든 요소들을 대상으로 합니다.
ex) .alert { border-radius: 10px; }
4. Type 선택자: X
Type 선택자는 특정 type의 모든 요소들을 대상으로 합니다.
ex) a { color: blue; }
5. 자손 선택자: X Y
자손 선택자는 요소의 하위 자손들을 대상으로 합니다.
ex) body header { padding: 8px 0 5px 0; }
6. 자식 선택자: X > Y
자식 선택자는 요소의 자식들만 대상으로 합니다.
ex) #article-list>.article-list-row.notice { font-style: italic }
7. 속성 선택자: X[ title ]
title 속성이 있는 요소만을 대상으로 하는 선택자입니다.
ex) .btn[type="submit"] { padding: 4px 12px !important; }
8. 가상 Class(의사 Class): X:Y , (참고: 가상 요소)
가상 Class는 선택자에 추가하는 키워드로 선택한 요소의 상태에 따라 반응합니다.
ex) a:hover { color: red; }
ex) a:not(:first-child) { color: green; }
마지막으로 정리하자면
예를 들어 .pagination>.active>span:hover { color: yellow; } 이라는 구문이 있을 때,
pagination이라는 Class의 모든 요소 아래 자식들 중,
active Class 의 자식인 span 요소가 hover 상태일 때 { color: yellow } 가 적용되는 구문이 되겠습니다.
원문 출처: https://webdesign.tutsplus.com/ko/the-30-css-selectors-you-must-memorize--net-16048t
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
