선택자 (selector)

선택자

• 요소 선택자

h1{
   color: coral;
}

• 그룹핑

h1, a{
   color: coral;
}

• 전체 선택자

*{
   color: coral;
}

• 자손 선택자 (자기 위치엣서 포함하는 모든 하위 요소가 해당)
  ex) h1안에 모든 a를 선택

h1 a{
   color: coral;
}

• 클래스 선택자

.클래스명{
   color: coral;
}

• 멀티 클래스 선택자
  ex) apple, banana라는 2개의 클래스를 가진 요소를 선택

<h1 class="apple banana">사과는 빨개 바나나는 길어</h1>
.apple.banan{
   color: coral;
}

(주의) .apple .banana 와 .apple.banana는 다름

.apple .banana는 자손 선택자를 사용한것으로 apple클래스 안에 banana클래스를 선택한 것
.apple.banana는 apple, banana 두 클래스를 모두 갖고있는 요소를 선택한 것

• 아이디 선택자

#아이디명{
   color: coral;
}

• 자식 선택자 ( 자기 바로 아래만 해당_ 할아버지-아버지[O], 아버지-아들[O] / 할아버지-아들[X] )

<h1>
    <p>
        <span>
            <b></b>
        </span>
    </p>
</h1>

h1의 자손은 p, span, b
h1의 자식은 p
ex)

h1 > p{
   color: coral;
}

• 인접 선택자
  : 앞의 요소 바로 뒤에 있는 요소만 선택
  ex) ul 뒤에 오는 첫 번째 p만 선택

ul + p{
   color: coral;
}

• 형제 선택자
  • 인접 선택자보다 덜 엄격
  • 앞의 요소 아래 있는 모든 요소 선택
    ex) ul 아래 있는 모든 p를 선택

ul ~ p{
   color: coral;
}

• 속성 선택자
  [속성명=속성값]

[id = "apple"]{	// #apple을 선택한 것
   color: coral;
}

[class = "banana"]{	// .banana를 선택한 것
   color: coral;
}

^시작 (즉, https://으로 시작하는)

a[href^="https://"] {
   width: 500px;
}

$끝나는 (즉, .pdf로 끝나는)

a[href$=".pdf"] {
   width: 500px;
}

가상 클래스 (Pseudo Class)

• 마우스가 닿는 상태
  :hover
  
  
• 링크 상태
  :link
  
  
• 링크 방문 후 상태
  :visited
  
  
• 클릭하는 순간 상태
  :active
  
  
• 포커스 상태
  :focus
  
  
• 첫 번째 자식
  :first-child

.nav li:first-child{
   color: coral;
}

• 마지막번째 자식
  :last-child

.nav li:last-child{
   color: coral;
}

• n번째 자식
  :nth-child(n)
  ex) 3번째 자식 선택

.nav li:nth-child(3){
   color: coral;
}

2n은 짝수번째 자식 (even을 써도 됨)
2n-1은 홀수번째 자식 (odd를 써도 됨)

• 자식이 없을 때
  :nth-of-type(n)
  
  
• 부정 선택자
  :not(선택자)
  ex) apple클래스 빼고 선택

div:not(.apple){
   color: coral;
}

가상 요소 (Pseudo Element)

• 첫 글자
  ::first-letter
  
  
• 첫 문장
  ::first-line
  
  
• 첫 부분
  ::before
  
  
• 마지막 부분
  ::after
  
  

before, after는 내용 추가 가능

h2 ::before{
   content: "시작";
}