9/7 학습

CSS 셀렉터

• #id_name.class_name{} : id가 id_name이면서 class가 class_name인 엘리먼트를 선택. 앞뒤가 뒤바뀌어도 가능. 띄어쓰기에 주의하자
• div p {} : div의 후손 엘리먼트 중 p 엘리먼트를 선택
• div > p {} : div의 자식(부모 바로 아래 있는 자식만 해당) 엘리먼트 중 p 엘리먼트를 선택
• div + p {} : div와 인접한 형제 엘리먼트 p를 선택한다.
• div ~ p {} : div와 인접한 형제 엘리먼트 p를 모두 선택한다.
• p[id='one'] : 속성 셀렉터

의사 클래스를 사용한 셀렉터

• p:first-child {} : P 엘리먼트 중에서 첫 번째 자식 엘리먼트 선택

<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <p>second p</p>
    <p>third p</p>
</div>
<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <p>second p</p>
    <p>third p</p>
</div>

• p:last-child {} : P 엘리먼트 중에서 마지막 자식 엘리먼트 선택

<div>
    <p>first p</p>  
    <p>second p</p>
    <p>third p</p>  <!-- 이 요소가 선택된다 -->
</div>
<div>
    <p>first p</p>  
    <p>second p</p>
    <p>third p</p>  <!-- 이 요소가 선택된다 -->
</div>

• p:nth-child(n) {} : 자식 엘리먼트가 'n'에 해당되면서 p태그인 경우 선택(형제 요소 중 다른 태그도 표함된다.)

/* 홀수번째 자식 엘리먼트 선택*/
p:nth-child(2n+1) {}
/* 또는 */
p:nth-child(odd) {}

<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <p>second p</p>
    <p>third p</p>  <!-- 이 요소가 선택된다 -->
</div>
<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <li>first li</li>
    <p>second p</p> <!-- 이 요소가 선택된다 -->
    <p>third p</p>  
</div>

• p:nth-last-child(n) {}
• p:first-of-type {} : 형제 요소 중 자신의 유형과 일치하는 첫 요소 선택

<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <p>second p</p>
    <p>third p</p> 
</div>
<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <p>second p</p>
    <p>third p</p>  
</div>

• p:last-of-type {}
• p:nth-of-type(n) {} : 위의 :nth-child(n)와 구분하기. 같은 p 태그에서 'n'번째 요소만 선택할 수 있다.

p:nth-of-type(odd) {}

<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <p>second p</p>
    <p>third p</p>  <!-- 이 요소가 선택된다 -->
</div>
<div>
    <p>first p</p>  <!-- 이 요소가 선택된다 -->
    <li>first li</li>
    <p>second p</p>
    <p>third p</p>  <!-- 이 요소가 선택된다 -->
</div>

• p:nth-last-of-type(n) {}
• p:not(#id_name) {} : 부정