일반 위치 선택자

2024. 5. 17. 20:38HTML

일반적인 위치나 구조를 나타내는 선택자

 

형제 관계에 있는 태그들 중에서 특정 태그만 선택하는 선택자

선택하는 기준을 통해 위치를 구분
   <div>
        <div class="A"></div>
        <div class="B"></div>
   </div>
div 태그 대신 변수명 A로 선택할 수 있음

- A: first-child
  형제들 중에서 가장 첫 번째를 선택
  첫 번째가 "A"가 맞다면 선택
- B: last-child
  형제들 중에서 가장 마지막 번째를 선택
  마지막이 "B"가 맞다면 선택

 

 

        일: nth-child(1) = 형제들 중에서 첫 번째가 "일"이 맞다면 선택
        이: nth-child(2) = 형제들 중에서 두 번째가 "이"가 맞다면 선택
        삼: nth-child(3) = 형제들 중에서 두 번째가 "삼"가 맞다면 선택
        사: nth-child(4) = 형제들 중에서 두 번째가 "사"가 맞다면 선택

 

만약 태그옆에 class나 id가 없으면 태그명을 작성해줘도 됨

 

 

 

'HTML' 카테고리의 다른 글

레이아웃 스타일(여백 관련 스타일)  (0) 2024.05.17
레이아웃 스타일(display , visibility)  (0) 2024.05.17
서식 양식  (0) 2024.05.17
CSS선택자  (0) 2024.05.17
CSS선택자 우선 순위  (0) 2024.05.17