Frontend/CSS

[CSS] css selector

양원준 2023. 7. 14. 12:22
728x90

 

css selector란?

 

 

말 그대로 선택을 해주는 요소이다

이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다

 

 

 

selector 종류는 크게 4가지이다

전체, 태그, 클래스, 아이디

 

.profile { font-size : 20px }  //클래스
#special { font-size : 30px } //아이디
p { font-size : 16px } //태그
* { font-size : 20px } //전체

 

 

위와 같이 css파일에 적용 가능하고 해당 요소에만 스타일이 적용가능하다

 

 

굳이 하나만 선택하지 않고 복합적으로 선택도 가능하다

 

//하위 선택자
section ul { font-size:20px; }

//자식 선택자
section>ul { font-size:20px; }

 

 

  • 하위 선택자 : 부모요소에 포함된 모든 하위 요소에 적용
  • 자식 선택자 : 부모요소 바로 아래 자식 요소만 적용 

 

 

 

selector 우선순위

 

 

 

간단하게  아이디 >클래스 > 태그

라고 생각하면 되고 형제와 같은 특수한 상황에서는 html문서 내 순서가 상위인 경우가 우선이다

 

 

 

 

 

728x90