본문 바로가기
Web/Web _ CSS

CSS _ 정리 01 : 선택자

by 머스타드 가오리 2020. 4. 17.

CSS 선택자

 

1. 유형선택자 : 요소이름

ex) div {~~}

 

2. 전체선택자 : *

ex) div * {~~}

: div 태그 하위의 모든 것들에 적용한다는 의미

 

3. ID선택자 : #

ex) #notice_board {~~}

: notice_board라는 ID를 가진 것들에 적용한다는 의미

 

4. 클래스선택자 : .

ex) .row {~~}

: row라는 클래스를 가진 것들에 적용한다는 의미


5. 자식선택자 : >

ex) body > p {~~}

: body 태그의 직계 자식인 p 태그에 적용한다는 의미

주의할 점은 직계 자식만 해당한다는 것이다. p태그의 하위에 다른 태그들에는 적용되지 않는 것이다.

 

6. 자손선택자 : space

ex) body p {~~}

: body 태그의 하위에 존재하는 모든 p태그에 적용한다는 의미

 

선택자의 종류가 더 많은 것 같지만, 내가 사용할 것들만 우선 정리해두려 한다.

'Web > Web _ CSS' 카테고리의 다른 글

CSS _ 정리 03 : 개발 이슈 (반응형 웹)  (0) 2020.04.17
CSS _ 정리 02 : Button, Transition  (0) 2020.04.17