가상 클래스 선택자
선택자 앞에 : 을 붙여서 선택한다.
사용자가 특정한 동작(이벤트)을 일으켰을 때 변화가 되는 선택자로는 hover, acitve, focus 가 있다.
(보통은 동작의 경우 JS로 수행하는데 특이한 케이스)
hover
- E 에 마우스 포인터가 올라가있는 동안에만 E 선택
- 마우스를 위에 가져다 두었을 때 해당 선택자에 작성된 CSS가 적용됨
E:hover
Active
- E 를 마우스로 클릭하는 동안에만 E 선택
E:active
Focus
- E 가 포커스 된 동안에만 E 선택
- 대화형 콘텐츠에서 사용 가능 (input, img, tabindex)
E:focus- 예) 입력창이 포커스됐을 때 빨간색으로 테두리 지정
- input 박스의 테두리의 경우 outline을 사용하는데 이는 다루기에 까다로우므로, outline: none 으로 지정하고 border를 사용한다.
🚨 -child 해석 주의!
.fruits p:nth-child(1)
(X) class fruits의 후손 p 태그 중에 첫번째 요소를 선택해라
(O) class fruits의 후손 중에 첫번째 자식을 찾아라. 그 자식이 p 태그인지 확인하고 맞다면 선택해라
위처럼 코드를 오른쪽에서 왼쪽으로 해석하는 것이 명확하다.
first-child
- E 가 형제 요소 중 첫번째 요소라면 선택
- 같은 부모를 공유하는 요소들 중 첫번째 요소라면 선택한다.
E:first-child
last-child
- E 가 형제 요소 중 마지막 요소라면 선택
E:last-child
nth-child
- E 가 형제 요소 중 n번째 요소라면 선택 (n키워드 사용 시 0부터 해석)
E:nth-child(n)
nth-of-type
- E 의 타입(태그이름)과 동일한 타입인 형제요소 중 E 가 n번째 요소라면 선택 (n키워드 사용 시 0부터 해석)
E:nth-of-type(n)
not
- 부정 선택자
- S 가 아닌 E 선택
- S 를 제외한 선택자 E 를 찾겠다는 의미
E:not(S)
가상 요소 선택자
선택자 앞에 :: 를 붙여서 선택한다.
🚨 주의! 가상 요소 선택자를 작성할 때 content가 들어있지 않으면 CSS 스타일링이 작성되지 않는다. 내용을 적지 않더라도 필수 요소! content="";
before
- E 요소 내부의 앞에, 내용(content)을 삽입
- 요소 내부 컨텐츠의 앞, 머리글 정도로 이해하면 비슷
E::before
after
- E 요소 내부의 뒤에, 내용(content)을 삽입
E::after
