- 의사 클래스(pseudo-class):선택하고자 하는 HTML 요소의 특별한 ‘상태’를 명시 할 때 사용
- 동적 의사 클래스(dynamic pseudo-classes) : :link,:visited,:hover,:active,:focus
- 상태 의사 클래스 (UI element states pseudo-class): :checked, :enabled, :disabled
- 구조 의사 클래스 (structural pseudo-class) : :first-child, :last-child, :nth-child(자연수), :nth-last-child(자연수)
first : 맨 앞, last : 맨 뒤, nth-child(N) : 앞에서부터 N번째 nth-last-child(N) : 뒤에서부터 N번째
n번째를 쓰는 클래스의 특징으로는 숫자 뒤에 n을 붙이면 배수만큼 골라내준다. 예를 들어 리스트를 7개 만들고 nth-child(2n)을 넣으면 2의 배수인 2,4,6번째 리스트에 스타일이 입혀진다.
child가 아닌 of-type인 경우 : 속성 중에서 순서를 찾아서 작성한다.
p/h1/h2가 3번 반복하는 div부모 태그를 만들었을 때[p/h1/h2/p/h1/h2/p/h1/h2]
p:last-of-type 를 하면 제일 마지막(h2)가 아니라 p 중에 제일 마지막꺼인 7번째(p) 가 스타일이 적용된다.
- 의사 요소 : 해당 HTML 요소의 특정 부분만을 선택 할 때 사용. :를 2개 붙여서 사용한다
- ::first-letter : 요소의 첫 글자만
- ::first-line : 요소의 첫 문장만 . br로 넘어간 문장들은 적용안됨
- ::before : 기존 요소 앞에 다른 요소 추가
- ::after : 기존 요소 뒤에 다른 요소 추가
위 둘을 쓸 때 앞이나 뒤에 배경색만 추가하고 싶다면 inline-block을 사용
content에 이미지 추가 시에 벡터이미지(예: .svg) 는 이미지 조절이 가능하고
비트맵이미지(예 : .jpg , .png)는 이미지 조절이 불가능하다
만약 비트맵이미지로 넣을려고 한다면 content는 빈 값을 넣고 background-image로 링크를 넣고 가로,세로 값을 지정 한 후(여기까지 하면 이미지의 왼쪽 위에서부터 해당 픽셀만큼만 출력된다) background-size:cover;를 추가한다(이것을 추가하면 꽉 차게 해준다) - ::selection :
- 속성 선택자 : 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택
- [속성이름] : 모두선택
- [속성이름=”속성값] : 두개 이상도 가능하다.