[CSS] 셀렉터(Selector) 표 정리

---

[CSS] 셀렉터(Selector) 표 정리

By i!kohong(아이코홍)

---

패턴&셀렉터(Selectors) 이름	의미 & 기능	예시문
■ * 유니버설 셀렉터 (Universal Selectors)	◎ [모든 엘리먼트(요소)] 유니버설 셀레터는 모든 엘리먼트(요소)를 대상으로 하는 셀렉터이다.	* {  …… }
■ E 타입 셀렉터 (Type Selectors)	◎ [유형 E의 엘리먼트]  타입 셀렉터는 가장 단순한 셀렉터로 엘리먼트 명을 지정하여 그 엘리먼트에 스타일을 적용한다.	p {   …… }
■ E[foo] 속성 셀렉터 (Attribute Selectors)	◎ ["foo"속성을 가지는 E 엘리먼트]  어떤 엘리먼트 중에서 지정한 속성을 가지고 있는 엘리먼트에 대해서만 스타일을 적용한다.	p [rel="external"] {   …… }
■ E[foo="bar"] 속성 셀렉터 (Attribute Selectors)	◎ ["foo" 속성값 E 엘리먼트는 "bar"와 정확하게 동일] 같은 속성 셀렉터이지만 지정한 속성명과 속성값이 동일한 엘리먼트에 대해서만 스타일을 적용한다.	input [type="text" {     …… }
■ E[foo~="bar"] 속성 셀렉터 (Attribute Selectors)	◎ ["foo" 속성값 E 엘리먼트는 공백으로 구분된 값 목록 중 하나는 "bar"와 정확하게 동일] 지정한 속성명과 속성 값을 포함하고 있는 여러 엘리먼트에 대해서만 스타일을 적용	p [class~="css"] {   …… }
■ E[foo^="bar"]  속성 셀렉터 (Attribute Selectors)	◎ ["foo" 속성값 E 엘리먼트는 문자열 "bar"로 시작] 지정한 속성명과 속성 값으로 시작하는 엘리먼트에 대해서만 스타일을 적용한다.	div[id^="aside"] {   …… }
■ E[foo$="bar"] 속성 셀렉터  (Attribute Selectors)	◎ ["foo" 속성값 E 엘리먼트는 문자열 "bar"로 종료] 지정한 속성명과 속성 값으로 끝나는 엘리먼트에 대해서만 스타일을 적용한다.	a[href$=".gif"] {   …… }
■ E[foo*="bar"] 속성 셀렉터 (Attribute Selectors)	◎ ["foo" 속성값 E 엘리먼트는 문자열 "bar"로 포함] 지정한 속성명과 속성 값을 포함한 엘리먼트에 대해서만 스타일을 적용한다.	div[id*="ext"] {   …… }
■ E[hreflang|="en"] 속성 셀렉터 (Attribute Selectors)	◎ ["hreflang"속성을 가지는 엘리먼트에 사용하며, 'en'으로 시작하는 값을 가진 요소들에 스타일을 적용] "en"으로 시작하는 값을 가진 E를 선택하고 스타일을 적용한다.	a[hreflang|="en"] {   …… }
■ E::first-line 유사 요소 (pseudo-element)	◎ [E 엘리먼트의 첫 번째 형식 라인] 엘리먼트의 '첫 번째' 행에 스타일을 적용시키며, 블록 엘리먼트에만 적용한다.	p::first-line { color:#ffffff; }
■ E::first-letter 유사 요소 (pseudo-element)	◎ [E 엘리먼트의 첫 번째 형식 문자] 엘리먼트의 제일 '첫 번째'문자에 스타일을 적용, 첫번째 문자가 특수문자인 경우 그 다음 문자와 함께 스타일 적용이 된다. 블록엘리먼트에만 적용되며, 속성에 대하여 제한이 있다.	p::first-letter { color:#ffffff; }
■ E::selection 유사 요소 (pseudo-element)	'선택'한 부분에 스타일을 적용한다.	p::selection {   …… }
■ E::before 유사 요소 (pseudo-element)	◎ [E 엘리먼트 전에 생성된 컨텐츠] 엘리먼트의 포함된 내용 '앞'에 내용을 생성한다.	p::before { content:"greg's"; }
■ E::after 유사 요소 (pseudo-element)	◎ [E 엘리먼트 다음에 생성된 컨텐츠] 엘리먼트의 포함된 내용 '뒤'에 내용을 생성한다.	p::after { content:"css selector"; }
■ E::not(s) 부정 유사 클래스 (Negation pseudo-classes)	◎ [간단한 선택 시 일치하지 않는 E 엘리먼트] 엘리먼트중 's'가 아닌 것에 스타일을 적용한다.	inpit::not([type="text"]) { background:blue; }
■ E F 자손 셀렉터 (Descentdant combinator)	◎ [부모 요소에 포함된 모든 자식 요소] 부모 엘리먼트에 포함된 모든 자식 엘리먼트에 대해서 스타일을 적용한다.	p strong { font-weight:normal; }
■ E:root 유사 클래스 (Structural pseudo-classes)	◎ [E 엘리먼트, 문서의 루트] 문서 내부의 루트(Root) 엘리먼트에 대해서 스타일을 적용한다.	:root {   …… }
■ E:nth-child(n) 유사 클래스 (Structural pseudo-classes)	◎ [E 엘리먼트, 그 부모의 N번째 아이] 부모 엘리먼트의 'n번째' 자식 엘리먼트에 스타일을 적용한다.	div.guide p:nth-child(7) {   …… }
■ E:nth-last-child(n) 유사 클래스 (Structural pseudo-classes)	◎ [마지막 하나 계수 E 엘리먼트는 부모의 N번째 아이] 부모 엘리먼트의 '마지막'으로부터 'n번째' 자식 엘리먼트에 스타일을 적용한다.	div.guide p:nth-last-child(7) {   …… }
■ E:nth-of-type(n) 유사 클래스 (Structural pseudo-classes)	◎ [E 엘리먼트, 그 타입의 N번째 형제] 부모 엘리먼트의 형제관계인 'n번째' 엘리먼트에 스타일을 적용한다.	div.guide p:nth-of-type(7) {   …… }
■ E:nth-last-of-type(n) 유사 클래스 (Structural pseudo-classes)	◎ [마지막 하나 계수 E엘리먼트의 타입의 N 번째 형제] 부모 엘리먼트의 '마지막'으로부터 형제관계인 'n번째' 엘리먼트에 스타일을 적용한다.	div.guide p:nth-last-of-type(7) {   …… }
■ E:first-chlid 유사 클래스 (Structural pseudo-classes)	◎ [상위 E 엘리먼트 첫 번째 자식] 부모 엘리먼트의 '첫번째'엘리먼트에 스타일을 적용한다.	div.guide p:first-chlid {   …… }
■ E:last-chlid 유사 클래스 (Structural pseudo-classes)	◎ [E 엘리먼트, 그 부모의 마지막 자식] 부모 엘리먼트의 '마지막' 엘리먼트에 스타일을 적용한다.	div.guide p:last-chlid {   …… }
■ E:first-of-type 유사 클래스 (Structural pseudo-classes)	◎ [E 엘리먼트, 그 유형의 첫 번째 형제] 부모 엘리먼트의 형제관계의 같은 이름을 가지고 있는 '첫번째' 엘리먼트에 스타일을 적용한다.	div.guide p:first-of-type {   …… }
■ E:last-of-type 유사 클래스 (Structural pseudo-classes)	◎ [E 엘리먼트, 그 유형의 마지막 형제] 부모 엘리먼트의 형제관계의 같은 이름을 가지고 있는 '마지막' 엘리먼트에 스타일을 적용한다.	div.guide p:last-of-type {   …… }
■ E:only-of-type 유사 클래스 (Structural pseudo-classes)	◎ [E 엘리먼트, 그 유형의 유일한 형제] 부모 엘리먼트 안에 '유일한' 엘리먼트에 스타일을 적용한다.	div.guide p:only-of-type{   …… }
■ E:empty 유사 클래스 (Structural pseudo-classes)	◎ [어떤 자식(텍스트 노드를 포함)이 없는 E 엘리먼트] 자식 엘리먼트를 '전혀 가지고 있지 않는' 엘리먼트에 스타일을 적용한다.	div.guide p:empty {   …… }
■ E:link 링크 유사 클래스 (The link pseudo-classes)	사용자가 아직 '방문하지 않은' 링크에 스타일을 적용한다.	a:link {   …… }
■ E:visited 링크 유사 클래스 (The link pseudo-classes)	사용자가 '방문하였던'링크에 스타일을 적용한다.	a:visited {   …… }
■ E:active 유저 액션 유사 클래스 (The user action pseudo-classes)	◎ [특정 사용자가 작업하는 동안의 E 엘리먼트] 마우스를 클릭하고 버튼에서 손을 떼었을 때와 같이 대상 엘리먼트가 활성화 되었을때 스타일을 적용한다.	a:active {   …… }
■ E:hover 유저 액션 유사 클래스 (The user action pseudo-classes)	◎ [특정 사용자가 작업하는 동안의 E 엘리먼트] 롤-오버와 같은 상황일 때와 같이 대상 엘리먼트가 가리켜지고 있을 때 스타일을 적용한다.	a:hover {   …… }
■ E:focus 유저 액션 유사 클래스 (The user action pseudo-classes)	◎ [특정 사용자가 작업하는 동안의 E 엘리먼트] 대상 엘리먼트가 포커스 되었을때 스타일을 적용한다.	a:focus {   …… }
■ E:target 타켓 유사 클레스 (The target pseudo-classes)	◎ [추천 URL의 대상이 되는 E 엘리먼트] URL에 앵커링크가 지정되어 있는 링크가 활성화 되었을때 스타일을 적용한다.	a:target {   …… }