선택자

동위 선택자 

단점 내앞에 오는 형제 태그는 선택할 수 없었다.

-선택자A+선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택

-선택자A~선택자B : 선택자A 뒤에 위치하는 선택자B를 선택

 

태그의 동등한 위치를 판단하여 CSS속성을 설정 할 수 있다.

+ ~

+뒤에 오는 형제를 선택할 수 있다. (근접 선택자)

~내 뒤에오는 원하는 형제까지 선택할 수 있는 선택자 (나는 포함되지않는다)

동위선택자(형제관계를 선택하는 선택자)는 +(근접 선택자), ~이 있다.

선택자 1+ 선택자 2는 선택자 1 바로 뒤에 나오는 선택자 2만 선택해주고, 선택자 1~ 선택자 4는 선택자 1 뒤에 있는 선택자 2~4까지 선택을 해준다. 이 때, 선택자 1은 선택에 해당하지 않는다!

 

반응 선택자 

마우스의 반응에 따른 속성을 설정 할 수 있다.

Link, Visited, Hover, Active

 

구조 선택자 

구조적에 따라서 css 속성이 변하는 설정을 할 수 있다.

nth-child(숫자n) : 타입과는 상관없이 n번째 자식요소선택

nth-of-type(숫자n) : 특정 요소 유형의 타입의 n번째 선택

nth-chlid(2n) : 2의 배수번째(짝수)를 선택한다.

nth-child(2n+1) : 홀수번째를 선택한다.

nth-child(3n+5) : 5부터 시작하여 세번째씩 선택한다.

first-child : 첫번째

last-child : 마지막번째

nth-child(odd) : 홀수번째

nth-child(even) : 짝수번째

nth-last-child(5) : 타입과는 상관없이 마지막에서부터 5번째

nth-last-of-type(5) : 특정요소타입의 마지막에서부터 5번째

 

a:link //링크가 걸린 글자의 색상을 변환시킨다.

a: visited //방문했던 페이지 링크 색상을 변환시킨다.

a: hover //마우스를 올렸을 때 스타일을 준다.

a: active //클릭하는 동안에 스타일을 준다