구조 선택자
부모태그안에 자식태그들이 동일한 태그로 구성되어 있을 때
특정 위치에 있는 자식태그만 선택할 때 사용한다.[기본형]
- 선택자:first-child★
: 부모태그안에 동일한 태그 형제 중 첫 번째에 위치한 태그만 선택함.(첫째)
- 선택자:last-child★
: 부모태그안에 동일한 태그 형제 중 마지막 번째에 위치한 태그만 선택함.(막내)
- 선택자:nth-child(수열)★
: 부모태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택한다.
이때 수열 자리에 2를 쓰면 형제 중 두번 째 위치에 있는 태그만 선택해준다.
수열자리에는 배수를 이용하여 특정 순번째에 있는 태그들을 다중 선택할 수 있는데
2n을 쓰면 '짝수'라는 뜻이고 2n+1은 '홀수'를 뜻한다.
만약 3의 배수 위치에 있는 태그들을 선택하고 싶다면 3n이라고 쓴다.
- 선택자:nth-last-child(수열)
: 부모태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택한다
단, last가 붙으면 밑에서 위로 순번을 센다.
마찬가지로 수열자리에는 숫자나 배수가 들어갈 수 있다.형태 구조 선택자
형태 구조 선택자는 부모태그안에 자식태그들이 각각 다른 태그로
구성되어 있을 때 사용한다.
구조 선택자는 부모태그안에 자식이 태그가 모두 동일해야 쓸 수 있다.[기본형]
[기본형]
- 선택자:first-of-type
: 부모태그안에 첫번째에 위치한 자식태그를 선택할 때 사용한다.
- 선택자:last-of-type
: 부모태그안에 마지막번째에 위치한 자식태그를 선택할 때 사용한다.
- 선택자:nth-of-type(수열)
: 부모태그안에 수열번째에 위치한 자식태그를 선택할 때 사용한다.
수열의 의미는 구조선택자와 똑같다.
-선택자:nth-last-of-type(수열)
: 부모태그안에 아래에서 수열번째에 위치한 자식태그를 선택할 때 사용한다.반응 선택자
반응 선택자는 사용자에 행동에 따라 반응하여 css디자인을 바꿀때 사용하는 선택자이다.
예를 들면 사용자가 마우스를 특정 태그 위에 올리거나 클릭했을때 상태를 말한다.[기본형]
- 선택자:hover★
: 사용자의 마우스 커서가 위치한 태그를 선택한다.
- 선택자:active
: 사용자가 마우스로 클릭한 태그를 선택한다.
단, 클릭하고 있는 동안만 반응한다. 잘 안씀
Hi