CSS Selector

CSS 셀렉터는 CSS 스타일을 적용시킬 HTML 엘리먼트를 찾기 위한 방법 입니다.

 

1. Element Selector

  • 엘리먼트를 이용하여 선택할때 사용
  • css selector로 div를 사용하면 가장 위에 있는 dss1이 선택
<div>dss1</div>
<p>dss2</p>
<span>dss3</span>

 

2. ID Selector

  • 아이디를 이용하여 선택할때 사용
  • 아이디를 셀렉할때는 #(아이디 이름)으로 선택
  • css selector로 #ds2를 사용하면 dss2가 선택
  • 여러개를 셀렉할때는 ,로 구분
  • css selector로 #ds2, #ds3를 사용하면 dss2와 dss3가 선택
<p id="ds1">dss1</p>
<p id="ds2">dss2</p>
<p id="ds3">dss3</p>

 

3. Class Selector

  • 클래스를 이용하여 선택할때 사용
  • 클래스를 셀렉할때는 .(클래스 이름)으로 선택
  • 엘리멘트를 그룹핑하여 스타일을 적용할때 사용
  • css selector로 .ds2를 사용하면 dss2, dss3가 선택
<p class="ds1">dss1</p>
<p class="ds2">dss2</p>
<p class="ds2">dss3</p>

 

4. not Selector

  • 셀렉터로 엘리먼트를 하나만 제거하고 싶을때 사용
  • not을 사용하여 셀렉트 할때에는 :not(선택에서 제거하고 싶은 셀렉터)으로 선택
  • 아래의 HTML에서 .ds:not(.ds2)으로 셀렉트 하면 class가 ds2인 클래스를 제외 하고 나머지 ds1, ds3, ds4, ds5가 선택
<p class="ds ds1">ds1</p>
<p class="ds ds2">ds2</p>
<p class="ds ds3">ds3</p>
<p class="ds ds4">ds4</p>
<p class="ds ds5">ds5</p>

 

5. first-child Selector

  • 엘리먼트로 감싸져있는 가장 처음 엘리먼트가 설정한 셀렉터와 일치하면 선택
  • .ds:first-child로 설정하면 ds1과 ds3가 선택
<body>
    <p class="ds" id="ds1">ds1</p>
    <p class="sc" id="ds2">ds2</p>

    <div class="ds">
        <p class="ds ds1">ds3</p>
        <p class="ds ds2">ds4</p>
        <p class="ds ds3">ds5</p>
        <p class="ds ds4">ds6</p>
        <p class="ds ds5">ds7</p>
    </div>
</body>
  • div.ds 엘리먼트의 가장 처음 .ds를 선택하고 싶으면 div.ds > .ds:first-child로 셀렉터를 작성

 

6. last-child Selector

  • 엘리먼트로 감싸져있는 가장 마지막 엘리먼트가 설정한 셀렉터와 일치하면 선택
  • .ds:last-child로 div.ds가 선택되어 ds3~ds7이 선택
<body>
    <p class="ds" id="ds1">ds1</p>
    <p class="sc" id="ds2">ds2</p>

    <div class="ds">
        <p class="ds ds1">ds3</p>
        <p class="ds ds2">ds4</p>
        <p class="ds ds3">ds5</p>
        <p class="ds ds4">ds6</p>
        <p class="ds ds5">ds7</p>
    </div>
</body>

 

7. nth-child Selector

  • 엘리먼트로 감싸져있는 n번째 엘리먼트가 설정한 셀렉터와 일치하면 선택
  • .ds:nth-child(3), .ds:nth-child(4)로 설정하면 ds4, ds5가 선택
  • nth-child의 ()안의 숫자는 가장 첫번째가 0이 아니라 1로 시작
<div class="wrap">
    <span class="ds">ds2</span>
    <p class="ds ds1">ds3</p>
    <p class="ds ds2">ds4</p>
    <p class="ds ds3">ds5</p>
    <p class="ds ds4">ds6</p>
    <p class="ds ds5">ds7</p>
</div>

 

8. 모든 하위 depth(공백) Selector

  • 공백문자로 하위 엘리먼트를 셀렉트 했을때, 모든 하위 엘리먼트를 선택
  • .contants h1를 선택하면 inner_1, inner_2가 선택
<div class="contants">
    <h1>inner_1</h1>
    <div class="txt">
        <h1>inner_2</h1>
    </div>
</div>

 

9. 바로 아래 depth(>) Selector

  • >문자로 하위 엘리먼트를 셀렉트 했을때, 바로 아래 엘리먼트를 선택
  • .contants > h1를 선택하면 inner_1이 선택
<div class="contants">
    <h1>inner_1</h1>
    <div class="txt">
        <h1>inner_2</h1>
    </div>
</div>
저작자표시 비영리 변경금지 (새창열림)

'과거 기록들 > Web Crawling' 카테고리의 다른 글

006-1 실습, Gmarket 상품 데이터 수집 (+ 이미지)  (0) 2023.03.26
005-1 실습, 네이버 연관 검색어 수집  (0) 2023.03.26
004-1 실습, Zigbang 원룸 매물 데이터 수집  (0) 2023.03.26
003-1 실습, 네이버 api 사용 실습 (파파고 번역, 통합검색어 트렌드 api사용)  (0) 2023.03.26
002-1 실습, header를 이용한 크롤링  (0) 2023.03.23

티스토리툴바