공부하는 블로그

(CSS) 선택자 정리 본문

Develop/CSS

(CSS) 선택자 정리

모아&모지리 2018. 2. 20. 11:31


border-radius아래의   >는 바로밑에 있는

border-radius아래의  ( )띄여쓰기는 모든 요소


nth-child (몇번째 자식요소)




  CSS선택자.

*

모든 엘리먼트

#c

id 속성값이 c인 엘리먼트

.c

class 속성값이 c인 엘리먼트

E

태그 이름이  E인 엘리먼트

E F

E 엘리먼트의 하위인 F 엘리먼트

E > F

E 엘리먼트의 자식인 F 엘리먼트

E:first-child

부모 엘리먼트를 기준으로 첫번째 자식인 E 엘리먼트

E:link

E 엘리먼트가 아직 방문 안했던곳(:link)자원

E:visited

이미 방문 헀던(:visited) 연결자원

E:active

E 엘리먼트가 활성화 되었을 때

E:hover

E 엘리먼트 위에 마우스가 올라왔을 때

E:focus

E 엘리먼트가 주목받고 있을 때

E:lang(c)

설정언어가 c인 엘리먼트

E + F

E 엘리먼트 바로 앞인 F 엘리먼트

E[foo]

속성(값에 상관없이)이 foo로 설정된 E엘리먼트

E[foo=”warning”]

foo 속성값이  warning인 E 엘리먼트

E[foo~=”warning”]

foo 속성값이 공간으로 분리된 값들의 목록으로, 그중 하나가 warning과 같은 E 엘리먼트

E[lang|=”en”]

lang속성이 붙임표(-)로 분리된 값들의 목록일 때, 왼쪽에서 en~으로 시작하는 E엘리먼트

DIV.warning

DIV[class~=”warning”]과 같음

E#myid

ID가 myid인 E엘리먼트


'Develop > CSS' 카테고리의 다른 글

CSS 적용하기  (0) 2017.09.25
CSS(Cascading Style Sheets)의 특징과 CSS Selector종류  (0) 2017.09.25