CSS 셀렉터는 CSS 스타일을 적용시킬 HTML 엘리먼트를 찾기 위한 방법 입니다.
div
를 사용하면 가장 위에 있는 dss1이 선택<div>dss1</div>
<p>dss2</p>
<span>dss3</span>
#(아이디 이름)
으로 선택#ds2
를 사용하면 dss2가 선택#ds2, #ds3
를 사용하면 dss2와 dss3가 선택<p id="ds1">dss1</p>
<p id="ds2">dss2</p>
<p id="ds3">dss3</p>
.(클래스 이름)
으로 선택.ds2
를 사용하면 dss2, dss3가 선택<p class="ds1">dss1</p>
<p class="ds2">dss2</p>
<p class="ds2">dss3</p>
:not(선택에서 제거하고 싶은 셀렉터)
으로 선택.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>
.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
로 셀렉터를 작성.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>
.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>
.contants h1
를 선택하면 inner_1, inner_2가 선택<div class="contants">
<h1>inner_1</h1>
<div class="txt">
<h1>inner_2</h1>
</div>
</div>
>
문자로 하위 엘리먼트를 셀렉트 했을때, 바로 아래 엘리먼트를 선택.contants > h1
를 선택하면 inner_1이 선택<div class="contants">
<h1>inner_1</h1>
<div class="txt">
<h1>inner_2</h1>
</div>
</div>