프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] SD_02 선택자

2021.06.29
북마크 작성자 정보
02 선택자
01 태그선택자
02 전체선택자
<style>
 * { color:red; }
 div * { color:red; }
</style>


03 class 선택자
04 id 선택자 
05 자손선택자 (하위선택자)
<style>
 div h2 { color:red; }
</style>

<div>
 <h2>선택자</h2>
 <div>
  <h2>선택자</h2>
 </div>
</div>


06 자식선택자
<style>
 div > h2 { color:red; }
</style>

<div>
 <h1>선택자1</h1>
 <h2>선택자2</h2><!-- 선택 -->
 <nav>
  <h2>선택자2</h2>
 </nav>
</div>


07 인접형제선택자
<style>
 div h1 + h2 { color:red; }
</style>

<div>
 <h1>선택자1</h1>
 <h2>선택자2</h2><!-- 선택 -->
 <h2>선택자2</h2>
 <nav>
  <h2>선택자2</h2>
 </nav>
</div>
<style>
 div nav ~ h2 { color:red; }
</style>

<div>
 <h1>선택자1</h1>
 <h2>선택자2</h2>
 <h2>선택자2</h2>
 <nav>
  <h2>선택자3</h2>
 </nav>
 <h2>선택자4</h2> <!-- 선택 -->
 <h2>선택자5</h2> <!-- 선택 -->
</div>


08 그룹화(, )
<style>
 #title, nav ~ h2 { color:red;  }
</style>


09 속성선택자 
<style>
 [target] { text-decoration:none; }
 [target="_blank"] { background-color:bule; color: white;}
</style>



<h1 id="tit">속성선택자</h1>
<h2>속성 선택자</h2>

<ul>
 <li><a href="#" target="_blank">링크1</li>
 <li><a href="#" target="_blank">링크2</li>
 <li><a href="#" target="_self">링크3</li>
</ul>
<a href="mailto:relation_co_kr@naver.com">relation_co_kr@naver.com</a>
<style>
 [target] { text-decoration:none; }
 a[target] { text-decoration:none; }  /* 자신중에~*/
 a [target] { text-decoration:none; }  /* 자식중에~*/
 [target="_blank"] { background-color:bule; color: white;}
 [target="_self"]  { backgriund-color:red; color:white; }

 [class^="link"] { list-style:none; }   /* link1, link2 */
</style>



<h1 id="tit">속성선택자</h1>
<h2>속성 선택자</h2>

<ul>
 <li class="st1"><a href="#" target="_blank">링크1</li>
 <li class="link1"><a href="#" target="_blank">링크2</li>
 <li class="link2"><a href="#" target="_self">링크3</li>
</ul>
<a href="mailto:relation_co_kr@naver.com">relation_co_kr@naver.com</a>


10 가상선택자 
link, active, visited a 태그와 같이 사용.
hover 다른 태그와 같이 사용가능
focus input과 같이 사용가능.
<style>
 a:link    { text-decoration:none; }   
 a:hover   { color:red; text-decation:underline; }
 a:active  { background-color:red; color:white;  }
 a:visited { color:silver; } 
 a:focus   { background-color:blue; color:white; } /* outline:none;  */

 input:focus { background-color:red; color:white; }
</style>



<h1 id="tit">가상 선택자</h1>
<h2>가상 선택자</h2>

<ul>
 <li class="st1"><a href="#" target="_blank">링크1</li>
 <li class="link1"><a href="#" target="_blank">링크2</li>
 <li class="link2"><a href="#" target="_self">링크3</li>
</ul>
<a href="mailto:relation_co_kr@naver.com">relation_co_kr@naver.com</a>

<input type="text" placeholder="이름입력">


11 의사요소 선택자 
<style>
 h1:before { content:'before '; color:red; }
 h1:after  { content:' after'; color:blue; }

 h1:before { content:''; display :inline-block; width:15px; height:15px; background-color:red; margin-right:20px; }

</style>
</style>


<h1 id="title"> css 기본문법</h1>
<h2>의사요소선택자</h2>


12 구조선택자
<style>
 li:first-child { text-decoration:underline; }
 li:last-child  { text-decoration:underline; }
 li:nth-child(3) { text-decoration:underline; }
 li:nth-child(2n) {background-color:silver; }   /* 짝수만*/
 li:nth-child(2n+1) {background-color:silver; } /* 홀수만  (n+4) 4번째부터 */
</style>



<h1>css 기본문법</h1>
<h2>구조선택자</h2>

<ul>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
</ul>


h1이외 모든 색상 변경
<style>
  h1 { color:#000; }
  :not(h1) { color: red; }
</style>



<h1>css 기본문법</h1>
<h2>구조선택자</h2>

<ul>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
 <ll>리스트 아이템</li>
</ul>

이 포스트 공유하기

전체목록