css기초-선택자

후손선택자(=자식선택자) 공백

부모안의 자식들을 선택하는 선택자.
부모안의 자식들을 선택할 때 공백으로 표기함.

  [기본형]
  부모태그 자식태그{속성 : 값;}

후손과 자손의 차이점은 자손은 바로 아래 계층만 해당한다.

자손선택자 >

부모 태그 안에 있는 자식 요소를 선택할 때 사용함.

[기본형]
  부모선택자 > 자식선택자{속성: 값;}

자손 선택자는 부모 태그 안에 있는 자식 요소를 선택할 때 사용함.
후손 선택자는 공백으로 구분하며 어떤 부모태그안에 해당 자식태그가 들어있으면
몇 계층 아래에 있던지 상관없이 모두 선택하지만 자손선택자는 바로 아랫계층 안에 있는 자식태그만 선택한다.

후손선택자와는 자손선택자보다 더 큰 범위이다. 예시로 위의 이미지에서 큰범위의 div와 안의div로 나눌 수있고 작은 범위의 div의 자식은 ul뿐이다.

동위선택자(형제선택자) + ~

동위선택자(=형제선택자)는 동위관계에서 바로 아랫줄에(뒤에)있는 형제 태그를 선택하거나
뒤에 있는 모든 형제 태그를 선택할 때 사용함.

• 선택자는 바로 뒤에 있는 형제 태그 1개를 선택할때 사용하고 바로 뒤에 해당 동생태그가
  없으면 선택되지 않음.~ 선택자는 위치와 관계 없이 기준 태그(형) 뒤에 해당 동생 태그가 있으면 모두 선택함.
  

    [기본형]
    선택자A + 선택자B {속성 : 값;}
    선택자A ~ 선택자B {속성 : 값;}

속성선택자 선택자 [ ]

태그에서 어떤 특정한 속성을 가지고 있는 태그만 선택하는 선택자.

[기본형]
    선택자[속성]{속성:값;}
    :태그에 해당하는 속성이 있는 태그만 선택함.
    선택자[속성="값"]{속성:값;}
    :태그에 해당하는 속성과 값이 일치하는 태그만 선택함.

반응 선택자 hover , active

반응 선택자는 사용자의 행위에 따라 반응하는 선택자를 말함.

  [기본형]
  - 선택자:hover {속성 : 값; }
  :사용자가 해당 태그 위에 마우스를 올리면 반응(특정 동작을 수행)함.
  - 선택자:active { 속성 : 값; }
  : 사용자가 해당 태그를 클릭하면 반응(특정 동작을 수행)함.
  

해당 요소를 마우스로 클릭했을 때 위의 이미지가 아래 이미지로 변한다.

반면에 active 선택자를 사용하면 클릭하는 순간만 반응한다.

구조선택자★

부모 태그안에 동일한 태그의 자식들로 구성되어 있을 때 특정 자식요소를 선택하는 선택자.

   [기본형]
- 선택자 : first-child{ 속성 : 값;}
: 부모태그 안에 자식들 중 첫번째 태그를 선택함.

- 선택자 : last-child{ 속성 : 값;}
: 부모태그 안에 자식들 중 마지막에 위치한 태그를 선택함.

- 선택자 : nth-child(숫자/숫자n){속성 : 값; }
: 부모태그 안에 자식들 중 해당 숫자 n번째에 위치한 태그를 선택함.
  n은 수열을 뜻하며 2n번째 2의 배수 번째에 있는 태그를 선택할 수 있다.

- 선택자 : nth-child(2n+1){속성 : 값; }
: 홀수값을 뜻함.
- 선택자 : nth-child(2n){속성 : 값; }
: 짝수값을 뜻함.

<예시> 선택자 : nth-child(4){속성 : 값; }


- 선택자:nth-Last-child(숫자/숫자n){속성 : 값;}
: 부모태그 안에 자식들 중 뒤에서(=막내부터) 해당 숫자 번째에 위치한 태그를 선택하거나
  뒤에서 수열번째에 있는 태그를 선택한다.