Pseudo-class Selector (가상 클래스 선택자)
selector: ___
first-child
그 요소 형제 중 첫번 째만 적용이 됨
고른 것들 중 첫번째가 아닌, 셀렉터에 의해 선택된 것의 첫번째 자식이다.
따라서, 예제의 Toy story에 movie라는 class가 없다면, 폰트 사이즈가 커지는 건 없을 것이다.<ul>의 첫번 째 자식만 바뀌는 것이다.
last- child
그 요소 형제 중 마지막만 적용이 됨
마찬가지로 형제 중 마지막 태그만 사용이 된다.
nth-child
class 중 원하는 걸 선택해서 적용하는 방법
함수 값으로도 이용 가능하다. 2n 또는 2n-1을 넣어 짝수 및 홀수 값에 적용 되게 할 수 있다.
odd : 홀수
even : 짝수
🧐 지정한 것 이후로 적용하고 싶다면?
nth-child() ~li {
}
first-of-type
형제들중 태그 첫번째에 적용. first-child의 첫번째 자식만 적용 되는 단점을 보완한다.
type중 첫번째므로 div태그에만 적용되는게 아닌 div, p, span 태그의 첫번째 자식들에 모두 적용되는 걸 볼 수 있다.
last-of-type
type 들 중 마지막에 적용. lastchild의 첫번째 자식만 적용 되는 단점을 보완한다.
nth-of-type
type 중 원하는 걸 선택해서 적용하는 방법
not
selector들에 적용하되, ()안에 있는 selector만 제외하고 적용
link, visited
link : 링크 방문하기 전에 색상
visited : 링크 방문 한 후 색상
hover, active, focus
hover : 버튼위에 마우스를 올렸을 때 나타나는 이벤트
active : 버튼을 클릭했을 때 (눌렀을 때부터 떼는 시점까지) 나타나는 이벤트
링크를 디자인 할 때 순서
- LVHA순서 ( link - visited - hover - active)
focus : 버튼을 tap키를 사용하여 포커싱 했을 때
또는 input text처럼 클릭해서 포커싱 할 경우 나타나는 이벤트
enabled, disabled, checked
enabled : disabled가 적용되지 않은 디폴트값.
- 같은 type들중에서 disabled가 적용되지 않은 것만 스타일 하고 싶을 경우
-> input[type=text]:enabled{ }
disabled : input창 비활성화
checked : radio or checkbox의 check를 미리 눌러놓고 싶을 때
Pseudo-Element Selector (가상요소 선택자)
selector::___
before, after
전 후로 원하는 걸 내용이 아닌 꾸밈의 요소로 넣는 방법.
뱃지를 붙일 때, 메뉴 사이 구분 점이나 구분 바를 추가할 때 주로 사용
first-letter, first-line, selection
- first-letter : text content의 첫번째 글자 스타일링
만약, 가상요소 선택자 before로 어떤 text를 넣었을 경우 그 text에 적용된다.
- first-line : text content의 첫번째 줄 스타일링
- selection : 드래그하는 영역 스타일링
