css 선택자

css 선택자

·선택자

말 그대로 선택하고자 하는 요소

특정 요소를 선택하여 스타일을 적용할 수 있게 해줌

 

전체 선택자

(요소 내부의)모든 요소를 선택

ex) *{

      속성: 값;

     }

 

태그 선택자

태그이름이 E인 요소 선택

ex) E{

      속성: 값;

     }

 

클래스 선택자

HTML class 속성의 값이 E인 요소 선택

ex) .class이름{

      속성: 값;

     }

 

아이디 선택자

HTML id 속성의 값이 E인 요소 선택

ex) #id이름{

      속성: 값;

     }

 

일치 선택자

E와 F를 동시에 만족하는 요소 선택

ex) EF{

      속성: 값;

     }

 

자식 선택자

E의 자식요소 F를 선택

ex) E>F{

      속성: 값;

     }

 

후손(하위) 선택자

E의 후손(하위)요소 F를 선택

ex) E F{

      속성: 값;

     }

 

인접 형제 선택자

E의 다음 형제 요소 F 하나만 선택

ex) E+F{

      속성: 값;

     }

 

일반 형제 선택자

E의 다음 형제 요소 F 모두 선택

ex) E~F{

      속성: 값;

     }

 

 

·가상 클래스 선택자

요소의 이벤트에 대응하기 위하여 미리 만들어 놓은 클래스

HOVER

E에 마우스(포인터)가 올라가 있는 동안에만 E 선택

ex) E:hover{

      속성: 값;

     }

 

ACTIVE

E를 마우스로 클릭하고 있는 동안에만 E 선택

ex) E:active{

      속성: 값;

     }

 

FOCUS

E가 포커스 된 동안에만 E 선택 (대화형 컨텐츠에서 사용가능)

ex) E:focus{

      속성: 값;

     }

 

FIRST CHILD

E가 형제 요소 중 첫 번째 요소라면 선택

ex) E:first-child{

      속성: 값;

     }

 

LIST CHILD

E가 형제 요소 중 마지막 요소라면 선택

ex) E:last-child{

      속성: 값;

     }

 

NTH CHILD

E가 형제 요소 중 n번째 요소라면 선택 (0부터 해석(Zero-base))

ex) E:nth-child(n){

      속성: 값;

     }

 

NTH OF TYPE

E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 N번째 요소라면 선택

ex) E:nth-of-type(n){

      속성: 값;

     }

 

부정 선택자

S가 아닌 E를 선택

ex) E:not(S){

      속성: 값;

     }

 

 

·가상 요소 선택자

문서의 특정 위치, 특정 영역, 특정 요소를 선택하기 위하여 미리 만들어 놓은 선택자

 

BEFORE

요소 내부의 앞에, 내용(content)을 삽입

ex) E:Before{

      속성: 값;

     }

 

AFTER

E요소 내부의 뒤에, 내용(content)을 삽입

ex) E:after{

      속성: 값;

     }

 

 

·속성 선택자

속성 선택자는 태그의 속성을 선택하는 것

ATTR

속성 ATTR을 포함한 요소 선택

ex) [attr]{

      속성: 값;

     }

 

ATTR=VALUE

속성 ATTR을 포함하며 속성 값이 VALUE인 요소 선택

ex) [attr=value]{

      속성: 값;

     }

 

ATTR^=VALUE

속성 ATTR을 포함하며 속성 값이 VALUE로 시작하는 요소 선택

ex) [attr^=value]{

      속성: 값;

     }

 

ATTR$=VALUE

속성 ATTR을 포함하며 속성 값이 VALUE로 끝나는 요소 선택

ex) [attr$=value]{

      속성: 값;

     }

 

 

상속

속성 선택자는 태그의 속성을 선택하는 것

생태계(.ecosystem)에 적용된 색상이 하위 요소들에게도 적용

 

상속되는 속성들

font(font-style, font-weigth, font-size, line-height, font-family)

color

text-align

text-indent

text-decoration

letter-spacing

opacity

 

강제 상속

상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 '부모'에서 '자식'으로 강제 상속시킬 수 있음.

'자식'을 제외한 '후손'에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것음 아님