#복합선택자#
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 - 요소 내부의 앞에 컨텐츠를 삽입.
'반영훈 > 웹 개발' 카테고리의 다른 글
[JS]변수/상수 선언 (0) | 2020.08.09 |
---|---|
[리액트]스타일,클래스 적용 (0) | 2020.08.09 |
[CSS] display 속성 (0) | 2020.06.20 |
[CSS] border 속성의 값 (0) | 2020.06.20 |
[CSS] box 사이즈를 자동 계산해 주는 box-sizing: border-box (0) | 2020.06.20 |
댓글