CSS 선택자 (태그 / 아이디 / 클래스 / 속성 / 상태)

선택자 유형

• 태그 선택자
• 아이디 선택자
• 클래스 선택자
• 속성 선택자
• 상태 선택자

태그 선택자

• 태그명 사용
• 요소 (element) 선택자라고도 함
• HTML 문서에 있는 같은 모든 태그에 동일하게 적용

태그명 { 속성명:값; }

h3 {
background-color:#000;
color:#fff;
width:50%;
margin-left:20px;
}

li {color:red;}

 

아이디 선택자

• # 사용
• 문서에서 특정 부분에만 필요한 스타일 적용할 때 사용
• 필요한 부분에 유일한 아이디를 지정하고 CSS 적용
• 식별 선택자라고도 함
• 태그에 반드시 id로 지정 되어 있어야 함
  • <태그명 id=”idName”> </태그명>

#idName {속성명: 값;}

#menu {
border:3px solid #000;
width:500px;
padding:10px;
margin-left:70px;
font-size:12px;
color:#777;
background-color:gold;
}

#content {
background-color:#ffc;
line-height:150%;
line-style:none;
width:200px;
color:red;
padding:5px;
border:1px solid #000;
margin-left:30px;
}

<div id="menu">
  ...
</div>

<div id="content">
  ...
</div>

 

 

클래스 선택자

• . 사용  (도트 선택자)
• 문서에서 특정 그룹에 필요한 스타일 적용할 때 사용
• HTML 태그의 class 속성이 지정되어 있어야 함
  • <태그명 class="className"></태그명>

.className { 속성명:값;}

속성 선택자

• HTML 태그의 속성 값에 따라 선택자로 정의

태그명[속성명="값"]
태그명[속성명^="값"]
태그명[속성명$="값"]
태그명[속성명*="값"]

<style type="text/css">
  /* 속성 선택자 : <a> 태그의 href 속성에 스타일 적용 */
  a[href="http://naver.com"] {
  color:green;
}
  /* 속성 선택자 : <a> 태그의 href 속성값 중에서 #으로 시작하는 속성에 스타일 적용" */
  a[href^="#"] {
  background-color:gold;
}
</style>

상태 선택자

• 태그의 상태로 선택해서 스타일 적용
• 상태
  • 체크된 상태
  • 포커스 받은 상태
  • 사용 가능/불가능한 상태

선택자:checked /* 체크된 input 태그 선택 */
선택자:focus /* 포커스를 받은 input 태그 선택 */
선택자:enabled /* 사용 가능한 input 태그 선택 */
선택자:disabled /* 사용 불가능한 input 태그 선택 */