티스토리 뷰
https://poiemaweb.com/css3-selector
CSS3 Selector | PoiemaWeb
CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다. 이러한 목적으로 사용
poiemaweb.com
셀렉터 종류는 위 링에 잘 정리 되어있고, 잘 쓰이는 몇 개만 적어보겠습니다.
전체 셀렉터
* { }
태그 셀렉터
div { }
section, h1 { }
ID 셀렉터
#IdName { }
class 셀렉터
.container { }
자식 셀렉터:첫 번째로 입력한 요소의 바로 아래 자식인 요소
div > ul { }
후손 셀렉터:첫 번째로 입력한 요소의 후손까지 선택
header div {}
가상 클래스 셀렉터
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */
UI 요소 상태 셀렉터
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */
댓글