220419 CSS Chapter 10

CSS 고급 선택자

 

 

- 연결 선택자

종류	형식	사용 예
하위 선택자	상위요소 하위요소	section p
자식 선택자	부모요소 > 자식요소	section > p
인접 형제 선택자	요소1 + 요소2	h1 + p
형제 선택자	요소1 ~ 요소2	h1 ~ p

 

- 속성 선택자

[속성] : 해당 속성이 있는 요소에게 적용함

ex) #signup input[type]

 

[속성=값] : 지정한 속성값이 있는 요소

ex) #signup input[type=text]

 

 

- 가상 클래스

특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 사용

종류	설명
:link	방문하지 않은 링크에 스타일을 적용
:visited	방문했던 링크에 스타일을 적용
:hover	지정한 요소에 마우스 포인터를 올려놓았을 때 스타일을 적용
:active	지정한 요소를 활성화 했을 때 스타일을 적용
:focus	지정한 요소에 초점이 맞춰졌을 때 스타일을 적용
:target	앵커 대상에 스타일을 적용

 

- 구조 가상 클래스

웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용

종류	설명
:first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택
:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택
A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택
A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택

 

- 가상 요소

선택자	설명
::first-line	첫 번째 줄을 선택
::first-letter	줄에서 첫 번째 글자를 선택
::before	특정 요소의 앞에 내용이나 스타일을 추가
::after	특정 요소의 뒤에 내용이나 스타일을 추가

---

출처 : Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석