CSS 선택자

CSS 선택자

 - 특정 HTML 태그를 선택할 때 사용하는 기능

 - 선택한 태그에 원하는 스타일 또는 스크립트 적용 가능

 

 

CSS 선택자의 종류

 

- 태그 선택자 : 해당하는 태그를 선택한다. h1{ }

- 아이디 선택자 : 해당하는 id를 선택한다. id 속성은 중복되지 않아야 한다. #id{ }

- 클래스 선택자 : 해당하는 class를 선택한다. Class 속성은 중복가능(일괄처리). .class{ }

- 속성 선택자 : 해당하는 속성을 선택한다.

 

 

반응 선택자

 - 선택자 : active - 클릭되었을 때

 - 선택자 : hover - 마우스를 올렸을 때

 - 선택자 : checked - 체크되었을 때 

 - 선택자 : not(선택자)

가상 클래스

 - 선택자 : after :  태그 컨텐츠 다음에 내용을 넣기 위해 사용

 - 선택자 : before : 태그 컨텍츠 이전에 내용을 넣기 위해 사용

 

CSS 선택자

Selector

Section,ul - section+ul

Section ul - section의 모든자손

Section > ul - section의 직계자손(바로아래ul)

Header ~p - header의 모든 형제 요소

Header +p - header의 근접 형제 요소 (header와 모든 근접 형제p)

 

의사 요소

- 요소의 특정 부분에 스타일을 적용하기 위해 사용되는 가짜 요소

::after - <?>태그 컨텐츠 다음에 내용을 넣는다

::before - <?>태그 컨텐츠 이전에 내용을 넣는다

::selection <?>태그 컨텐츠에서 사용자가 선택한 부분

p::after{

content:" - my world.";

}

/* p태그 문장 앞에 해당 문장 추가 */

p::before{

content :"*";

}

 

 

 

 -