[HTML&CSS] CSS의 선택자

CSS의 선택자

1. 자식 선택자('>') (section > div)

< section > 요소의 직접적인 자식으로 있는 < div > 요소를 선택
< section > 안에서 바로 중첩(바로 아래 항렬에 있는) 된 < div >를 선택

2. 후손 선택자(공백) (section div)

< section > 내의 모든 < div > 요소를 선택
직접적인 자식이 아니더라도 중첩된 어떤 깊이에 있던지 상관없이 모든 < div >를 선택

<style>
  /*section 안에 모든 div*/
        section div{
            color:red
        }
   /*section의 자식인 div*/     
        section > div{
            color:blue
        }
</style>

<section>
/*HTML 코드*/
<section>
   <div>직접적인 자식 div</div>
   <div>
      <div>간접적인 자식 div</div>
   </div>
</section>

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

.classname {
   /* 클래스가 classname 모든 요소에 스타일을 적용 */
}

4. 'id'선택자

단일 요소에 대해 선택 할 때 사용
특정 요소를 유일하게 식별하고 스타일을 적용하기 위해 사용(특정 영역에 대한 스타일 지정

 #content {/*id의 속성 값*/
   margin: 20px;
}
 
 <div id="content">
      <p>This is the main content of the website.</p>
   </div>

: nth-child

부모 요소의 자식 중에서 특정 위치에 있는 요소를 지정
모든 자식 요소 중에서 순서를 기준으로 선택
ex) div : nth-of-type(2) : div 이면서 2번째 자식
※ div : nth-child(2) : div 이면서 뒤에서 2번째 자식

: nth-of-type

동일한 유형의 자식 요소(div, span같은 tag) 중에서 선택_
ex) div : nth-of-type(2) : div 중에서 2번째
※ div : nth-last-of-type(2) : div 중에서 뒤에서 2번째