Soke

CSS 선택자(Selector)

전체(universal) 선택자 ( * )

* { background-color:#fff }

유형(type) 선택자

p { color:red }

div { margin:0 auto }

<div><p>Red</p></div>

ID 선택자 ( # )

#header { position:absolute }

<div id="header"></div>

클래스(class) 선택자 ( . )

.header { position:relative }

<div class="header"></div>

체인(chain) 선택자

.chain1, .chain2, .chain3, #chain { background-color:blue }

<span id="chain">chain</span>

<span class="chain1">chain1</span>

<span class="chain2">chain2</span>

<span class="chain3">chain3</span>

자식(child) 선택자

body > p { color:white }

형제(sibling) 선택자 ( 앞에 지정된 요소 이후의 모든 형제요소에 적용)

h1 ~ p { background-color: green }

<p>First</p>

<h1>Heading</h1>

<p>Sibling</p>

<p>Sibling</p>

인접 형제(adjacent sibling) 선택자 ( 앞에 지정된 요소 이후의 가장 근접한 하나의 형제요소에 적용)

h1 + p { background-color: green }

<p>First</p>

<h1>Heading</h1>

<p>Sibling</p>

<p>Sibling</p>

속성(attribute) 선택자 - 요소[속성]

h1[title] { color:blue }

<h1 title="number first"></h1>

<h2></h2>

<h3 title="number last"></h3>

속성(attribute) 선택자 - 요소[속성=값]

h1[title="first"] { color:blue } ( 특정 단어인 요소 선택 )

h1[title~="number"] ( 특정 단어를 포함한 요소 선택 )

h1[title^="number"] ( 특정 단어로 시작되는 요소 선택 )

h1[title$="first"] ( 특정 값으로 끝나는 요소 선택 )

가상 클래스 & 가상 콘텐츠 

:first-child ( 첫번째 자식 요소 선택 )

:hover

:focus

:before

:after

:nth-child(an+b) ( a와 b는 상수로 수의 범위는 정수, n은 변수로 음이 아닌 정수가 차례대로 대입 a * n + b 번째 요소 선택 ex)2n+1 )

:nth-child(even)

:before, :after 와 ::before, ::after의 차이점은?

:active, :first-child, :nth-child등은 싱글클론을 사용하고, 가상 요소(::first-letter, ::first-line, ::before, ::after)에는 더블클론(::)을 사용한다.