[CSS] 선택자

·2021년 1월 9일
0

선택자 (selector)

선택자에 의해 선택된 요소들은 선택자의 주제(subject) 라 한다.

tag 선택자

ex) a {...}

* 선택자

ex) * { ... }
-> 전체 라는 의미
문서 전체를 선택한다

ID(#) & class(.)

ex) #id_name { ... } / .class_name { ... }

  • ID : 유일
  • class : 여러 tag에 적용

    li.menu { ... } : li 태그 중 menu클래스인 것에만 대하여..

속성 선택자

ex) input[type=text] { ... }

후손 및 자식(>) 선택자

후손 선택자

ex) div li { ... }
자기 밑에 쭉~ (자식, 자식의 자식, 자식의 자식의 자식, ... )

자식 선택자

ex) div>h1 { ... }
자기 딱 한 단계 밑만 (only 자식)

동위 선택자 (+ , ~)

동등한 위치에서

+ : 바로 밑에 한개만

ex) h3+div { ... }

~ : 쭈욱~

ex) h3~div { ... }

반응 선택자

마우스의 반응에 대한 속성 설정
ex) li:hover { ... } / a.active { ... } / a.visited { ... }

h1:hover

마우스 올려놓으면

a:active

마우스 클릭하면

a:visited

link 클릭해서 방문하면

상태 선택자

상태에 따라 변화

input:focus

focus가 된 input 태그를 선택 (입력중일 시 focus 됐다고 한다)

input:enabled

입력이 가능한 input 태그를 선택

input :disable

입력이 불가능한 input 태그를 선택

구조 선택자

nth-child(수열) / first-child / last-child

0개의 댓글