코드보기 [더보기] 선택
더보기
<style>
div{font-size:20px; font-weight:800; margin-bottom: 30px;}
/* 선택자 */
/* [ last-child ] 마지막 자식요소를 선택하는 선택자 */
.last li:last-child{background-color: yellow} /*마지막 자식요소에 배경색 넣기*/
/*[ nth-of-type()/ nth-child() ] */
.child p:nth-of-type(2) {background-color: yellow} /* 나와 동일한 요소(p태그)들 중 2번째 요소에 적용*/
.child p:nth-child(2) {background-color: red} /* 부모(child)를 기준으로 2번째 자식요소인 'p'에 적용 <--적용안됨:2번째 요소는 strong태그 이기 때문 */
.child strong:nth-child(4){background-color: orange} /*적용됨 */
.child p:nth-of-type(3) {background-color: pink} /*부모(child)를 기준으로 3번째 요소인 */
.child p:nth-child(5){background-color: red } /*nth-child로 찾음*/
/*해당하는 요소들 중 몇 번째 요소: nth-of-type
전체에서 몇번째 요소: nth-child */
/*[ not() ] */
p{color:#000;}
:not(p){color: darkblue} /*p요소를 제외하고 폰트색을 darkblue로 적용하라 */
</style>
</head>
<body>
<h3>[ last-child ] 마지막 자식요소를 선택하는 선택자</h3>
<ul class="last">
<li>첫번째 자식요소</li>
<li>두번째 자식요소</li>
<li>세번째 자식요소</li>
</ul>
<h3>[ nth-of-type()/ nth-child() ] 몇번째 자식을 선택할 것인지</h3>
<h4> 1) nth-of-type() : 해당하는 요소들 중 몇 번째 요소<br/>
2)nth-child():전체에서 몇번째 요소</h4>
<div class="child">
<p>1. 첫번째 p요소 -----------> 1 </p>
<strong>1.첫번째 strong요소 -----------> 2</strong>
<p>2. 두번째 p요소 -----------> 3 </p>
<strong>2.두번째 strong요소 -----------> 4</strong>
<p>3. 세번째 p요소 -----------> 5 </p>
<strong>3.세번째 strong요소 -----------> 6</strong>
</div>
<h3> [ not() ] </h3>
<p>:not() ()을 제외하고,~~ 지정/스크립트에서도 씀 </p>
</body>
EX_html5_0227-4선택자,not().html
0.00MB
