Selector

section ul{color:blue} header ~p{color:blue}

asection은 parent element이며 ul은 자손 요소(자식, 손자 등을 포함한 section안에 있는 모든 자손)이다.

header의 경우 p가 형제 element(모든 형제 요소)이다.

반면에 아래와 같은 경우는

seclection > ul{color:blue;}   header +p{color:blue;}

selection이 부모요소인것은 같지만 ul은 자손요소가 아닌 자식에게 만 해당되는 자식 요소가 된다.

p가 근접한 형제에만 해당되는 형제요소가 된다.

ul{color:blue;}			→     ul,p {color:blue;}
p{color:blue;}

이와 같이 한줄에 줄이는 것도 가능하다.

 

셀렉터의 부모와 자손

section ul{color:blue;}
section >ul{color:blue;}

body → section → header

                             → p

                             → ul → li → ul

                                      → li → ul

section은 상위요소인 #container가 되며 처음에 위치한 ul은 #container의 자식요소(하위요소)가 되고 ul 밑에 있는 요소들 역시 #container의 손자요소(하위요소)가 된다. 첫줄에 있는 코드는 모든 자손들, 두번째 줄 코드는 자식요소에게만 해당된다.

 

셀렉터 형제와 근접형제

header ~ p{color:blue;}
header + p{color:blue;}

body → section → header

                             → p //1

                             → p //2

section은 상위요소인 #container가 되며 첫줄의 코드는 header의 모든 형제 요소에 접근하며, 두번째 줄의 코드는 가장 근접한 형제요소인  p //1번째를 선택한다.

 

속성 셀렉터

• [속성] : 지정한 '속성' 일경우

[href]
<a href = "#">메뉴1</a>

 

• [속성 = 값] : 값에 일치 할때

[target="_blank"]
<a href="......" target= "_blank">html</a>

 

의사 요소(pseudo elements) :  요소의 특정부분에 스타일을 적용하기 위해 사용하는 가짜 요소

•  ::selection : 컨텐츠에서 사용자가 선택한부분

p::selection

 

의사 클래스(Pseudo classes) : 요소의 특별한 상태를 정의하기 위해 사용되는 가짜  클래스

• :checkd : 모든 체크된 <input>요소들을 선택한다.
• :disabled : 모든 체크되지 않은 <input> 요소들을 선택한다.
• :focus : 집중된 <input> 요를 선택한다.
• :hover : 마우스가 올려져있는 링크를 선택한다.