후손선택자
후손선택자는 부모태그 안에 있는 모든 자식태그들을 말한다.
후손선택자의 표기는 공백으로 표기한다.
[기본형]
선택자A 선택자B
자손선택자
자손선택자는 부모선택자의 바로 아래계층에 있는 자식태그들을 말한다.
표기는 '>'로 표기한다.
동위선택자(=형제선택자)
동위선택자는 형제관계에서 뒤에 위치한 동생 태그들을 선택할때 사용하는 선택자이다.
[기본형]
1. 선택자A + 선택자B [바로뒤]
:선택자A 바로 뒤에 있는 선택자B를 선택함.
만약 바로 아랫줄레 선택자B가없으면 적용되지 않는다.
ex) < h1>제목1< /h1>
< h2>제목1< /h1>
< h3>제목1< /h1>
h1+h3 선택x h1은 h2만 선택할수 있음 2.선택자A ~ 선택자B
: 선택자A 뒤에 있는 선택자B를 선택함
만얀 동일한 태그가 여러개 있으면 다중 선택한다.
속성선택자
속성 선택자를 사용하면 특정 속성을 가진 html태그를 선택할수 있다.
선택자 뒤에 [ ]를 붙여 표현한다.
[기본형]
1. 선택자 [속성]
:선택된 태그 중 해당 속성을 가진 태그만 선택한다.
2. 선택자[속성 = 값]
:선택한 태그 중 해당 속성과 값이 일치하는 태그를 선택한다.
구조선택자
부모태그 안에 자식태그들이 동일한 태그로 구성되어 있을 때 특정 위치에 있는 자식태그만 선택할 때 사용한다.
-선택자:first-child★
:부모박스안에 동일한 태그 형제 중 첫 번째에 위치한 태그만 선택함.
ex) first-child=첫째
-선택자:last-child★
:부모태그안에 동일한 태그 형제 중 마지막 번째에 위치한 태그만 선택함
ex) last-child=막내
-선택자:nth-child(수열)★
: 부모태그안에 동일한 태그 형제 중 특정 순번째에 위치한 태그를 선택한다.
이때 수열 자리에 2를 쓰면 형제 중 두번 째 위치에 있는 태그만 선택해준다.
수열자리에는 배수를 이용하여 특정 순번째에 있는 태그들을 다중 선택할 수 있는데
2n을 쓰면 '짝수'라는 뜻이고 2+1은 '홀수'를 뜻한다.
만약 3의 배수 위치에 있는 태그들을 선택하고 싶다면 3n이라고 쓴다.
ex) nth-child(4)=넷째
-선택자:nth-last-child(수열)
: last가 붙으면 밑에서 위로 순번을 센다. 마찬가지로 수열자리에는 숫자나 배수가 들어갈 수 있다.
ex) nth-last-child(4)=둘째
형태 구조 선택자
형태 구조 선택자는 부모태그안에 자식태그들이 각각 다른 태그로 구성되어 있을 때 사용한다.
구조 선택자는 부모태그안에 자식 태그가 모두 동일해야 쓸 수 있다.
-선택자:first-of-type
:부모태그안에 첫번째에 위치한 자식태그를 선택할 때 사용한다.
-선택자:last-of-type
:부모태그안에 마지막째에 위치한 자식태그를 선택할 때 사용한다.
-선택자:nth-of-type (수열)
:부모태그안에 수열번째에 위치한 자식태그를 선택할 때 사용한다.
수열의 의미는 구조선택자와 똑같다.
-선택자:nth-last-of-type (수열)
:부모태그안에 아래에서 수열번째에 위치한 자식태그를 선택할 때 사용한다.
수열의 의미는 구조선택자와 똑같다.
반응선택자
사용자가 마우스를 특정 태그 위에 올리거나 클릭했을 때 등 행동에 반응하여 css디자인을 바꿀때 사용하는 선택자이다.
-선택자:hover★
: 사용자의 마우스 커서가 위치란 태그를 선택한다.
-선택자:active
:사용자가 마우스를 클릭한 태그를 선택한다.
단, 클릭하고 있는 동안만 반응한다. 잘 안쓴다
상태선택자
상태선택자는 서치바나 로그인창, 체크 박스 등 입력양식의 상태를 선택할 때 사용하는 선택자이다.
[기본형]
-선택자:checked
:체크 상태의 input태그를 선택할때 사용한다.
-선택자:focus
:포커스 상태(무언가를 입력하거나 클릭할 수 있도록 요소가 활성화 된 상태)의
태그를 선택할 때 사용한다.
-선택자:enabled
:사용가능한(입력 가능한) 상태의 태그를 선택할 때 사용한다.
-선택자:disabled
:사용불가능한 상태의 태그를 선택할 때 사용한다.
가상요소 선택자★
html문서내에는 보이지 않지만 미리 정의한 위치에 가상의 요소를 넣어 표현할 수 있다.
가상요소 선택자로 만들어지는 가상요소들은 inline 속성을 갖는다.
[기본형]
-선택자::before
:선택자의 앞에 가상요소를 생성한다. 필수 속성으로 content속성을 넣어 표현한다.
-선택자::after
:선택자의 뒤에 가상요소를 생성한다. 필수 속성으로 content속성을 넣어 표현한다.
부정 선택자
부정 선택자는 선택된 태그 중 제외하고 싶은 태그가 있을 경우 사용한다.
[기본형]
선택자:not(제외시킬 요소)
: 태그를 다중 선택하는데 특정 요소는 제외하고 선택한다.
