선택자
.className
#id
tag
* 모든 태그 선택 (reset.css)
a선택자(공백)b선택자 a선택자 태그 안에 포함된 b선택자 태그
a선택자+b선택자 a선택자 다음에 오는 b선택자를 선택함. b태그에 클래스명 주기는 싫고 같은 태그는 여기저기 많을 때?
a>b a태그 안의 첫번째 자식인 b를 선택한다.
a~b a태그 바로 뒤에 b가 없어도 대~충 뒤에 있으면 잡아준다.
[ ] 속성 선택자
a[title=google]
a태그들 중 title이 google인 값을 갖고있는 태그를 선택: 가상 선택자
:hover
요소에 마우스를 올렸을 때 발생하는 이벤트
:link
a 태그에 기본으로 적용되는 이벤트(방문 전)
:visited
a 태그를 눌러 페이지를 방문한 기록이 있는 경우 보여지는 이벤트
z:not(제외할 선택자)
태그 z 중 ( )괄호 안에 들어간 선택자(클래스, id..)가 없는 태그를 선택
:nth-child(number)
(number) 숫자에 맞는 순서에 태그에 스타일을 적용함
ex_) p:nth-child(2) ⇨ p 태그들 중 2번째 p태그
:nth-type(number)
(number) 숫자에 맞는 순서에 class명에 스타일을 적용함
ex_) .mainText:nth-type(3) ⇨ class명이 mainText인 태그 중 3번째 태그
:nth-last-child
:nth-last-of-type(n)
뒤에서부터 n번째 태그를 선택함
:first-child
:first-of type
해당 태그들 중 첫번째 태그/타입
:: 가상 요소
::first-line
p, h 태그같이 텍스트를 보여주는 태그의 첫번째 줄을 선택한다.
::first-letter
텍스트를 보여주는 태그의 첫번째 글자를 선택한다.
::before ::after
선택한 태그 앞 또는 뒤에 특정 콘텐츠(content)를 붙일 수 있다.
.rabbit::after{
content: "당근 당근";
}
<p class="rabbit">
bunny bunny
</p>
bunny bunny 당근 당근
