CSS: 선택자(Selector)

css 기본구성 룰

first {name:kim; padding:4px;}

first 는 selector 선택자
name:kim; 과 padding:4px 는 declaration 선언
name, padding 은 속성(property), kim, 4px 는 속성값(property value).
{}는 선언 블록이다.
형제 관계란 같은 부모 요소를 가지는 요소들을 서로 형제 관계라고 부른다.
모든 블록들이 모여서 Style Sheet를 이루게된다.

태그를 포함하는 요소가 부모요소 태그에 포함 되는 요소가 자식 요소이다.

section{ // 부모요소
		p{} // 자식요소
		ul{ // 자식요소 이자 하위요소의 부모요소.
			li{}
			li{ 
    		        ul{}
    	          }
        } // ul 요소안에 ul은 하위요소.

section 은 부모 요소 section에 포함되는 p{},ul{}은 자식요소이다. 하위 선택자는 부모 요소에 포함된 모든 하위 요소이다. 자식 선택자는 부모의 아래 자식에만 적용.

선택자의 종류

전체 선택자
HTML 페이지 모든 element(태그에) 적용된다. *{} 연산자를 사용한다. margin 또는 padding 고정값을 이용하기 위해 사용.

태그 선택자
태그를 직접 선택한다.
div
p

아이디 선택자
각 주어진 아이디어를 사용함으로써 각 element에 접글 할수 있다. #연산자를 이용한다. #first{} , #second{}

<p id="first"> </p>
<p id="second"> </p>

클래스 선택자
아이디 선택자랑 똑같은 방식이지만 .연산자를써서 접근한다. ID선택자의 우선순위가 클래스 보다 높다. .first{} , .second{}

<p class="first"> </p>
<p class="second"> </p>

복합 선택자

속성 선택자
가상 클래스 선택자
등등이있다.

ref -https://www.nextree.co.kr/p8468/