본문 바로가기
반영훈/웹 개발

[CSS]다양한 선택자

by Banda 2020. 6. 25.

#복합선택자#
span.apple{}
->span태그에서 애플이라는 클래스를 선택

ul>.apple{}
->ul태그의 자식중에서 apple이라는 클래스를 선택

div .orange{}
->div태그의 후손(띄어쓰기)중에서 orange라는 클래스를 선택

인접형제선택자
.orange + li {}
->선택자 다음의 인접형제선택
일반형제선택자
.orange ~ li {}
->선택자 다음의 일반형제선택

#가상클래스 선택자#
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(2n+1) - 홀수 번째 자식
:nth-of-type(n) - 특정한 태그를 가진 n째 요소
:not(S) - 특정 요소를 뺀 요소
ex) fruits li:first-child ->첫번째 자식요소 이어야 하고 이는 li태그여야하며 fruits값을 가지고 있어야한다.

#가상요소선택자# "::"
::before - 요소 내부의 앞에 컨텐츠를 삽입.

댓글