CSS정리 - Chapter.02(Selector)

셀렉터(Selector)

 

(1) CSS 기본 셀렉터

- 태그 이름으로 접근한다.
예) h1 {......}
=> h1 태그의 속성을 지정한다.

 

(2) CSS 자식 셀렉터

- ">" : 자식 셀렉터, HTML 태그의 계층 구조를 표현한다.

예) p > div > fieldset > #pwd {......}
=> p태그 안의, div태그 안의, fieldset태그 안의, id가 pwd인 태그

<p>
   <div>
      <fieldset>
         <input type="text" >
         <input type="password" id="pwd">
         <input type="text" >
      </fieldset>
   </div>
</p>

(3) CSS 자손 셀렉터

- 자손 셀렉터는 태그의 계층 관계를 나타낸다.
- 자식 셀렉터와 다르게, 명시과정에서 중간단계를 생략해도 된다.

예) p div #pwd {......}
=> p 태그하위의, div 태그안의, id가 pwd인 태그

<p>
   <div>
      <fieldset>
         <input type="text" >
         <input type="password" id="pwd">
         <input type="text" >
      </fieldset>
   </div>
</p>

(4) 특정 요소를 구체적으로 서술하기

- HTML 태그와 class 또는 id 속성과 함께 명시된다.
- 특정 요소를 더욱 정교하게 명시하고자 할 때 사용한다.
- "A#B" : id 속성이 B인 A태그
- "A.B" : class 속성이 B인 A태그

예) p div input#pwd {......}
=> p태그 안의, div태그 안의, id가 pwd인 input태그

<p>
   <div>
      <fieldset>
         <input type="text" >
         <input type="password" id="pwd">
         <input type="text" >
      </fieldset>
   </div>
</p>

 

 

(5) HTML 태그의 속성에 따른 구분

- CSS 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라서 태그 요소를 좀 더 구체적으로 가리킬 수 있다.
- selector[속성] : []안에 명시된 태그 속성을 갖는 요소를 의미한다.
- selector[속성=값] : []안에 명시된 태그 속성이 지정된 값을 갖는 요소를 의미한다.

예) input[type='password'] {......}
=> input 태그 중에서 type이 'password'인 input 태그

<p>
   <div>
      <fieldset>
         <input type="text" >
         <input type="password" id="pwd">
         <input type="text" >
      </fieldset>
   </div>
</p>

 

 

(6) 가상 클래스 기법

 

가상 클래스

 

의미
:first-child
여러 개의 반복되는 태그들중에서 첫 번째 요소
:last-child
여러 개의 반복되는 태그들중에서 마지막 요소
:link
링크의 기본 상태
:active
요소 위에서 마우스가 눌려져 있는 상태
:hover
요소에 마우스가 올라가 있는 상태
:visited
방문했던 경험이 있는 링크
:focus
요소에 포커스가 지정된 상태
:checked
체크박스나 라디오버튼 등이 체크된 상태
:selected
드롭다운에서 선택된 요소

예) 링크의 글자 색상 적용
a:link {color : #555555; }
a:visited {color : #555555; }
a:active {color : #555555; }
a:hover {color : #555555; }

예) focus 유무에 따른 배경색 설정 
input {background-color: #ffffff; }
input:focus {background-color: #555555; }

예) 마우스 위치에 따른 배경 이미지 설정
.menu_item {background-image: url(기본이미지); }
.menu_item:hover {background-image: url(롤오버이미지); }

(7) 선택자의 우선순위

- 공통선택자 : 0
- 타입선택자 : 1
- 클래스 선택자 : 10
- 아이디 선택자 : 100
- 인라인 형식 : 1000
- 우선순위에 관계없이 적용되는 css : !important
  => 선택자의 우선순위와는 관계없이 무조건 적용되어야 하는 속성값의 마지막에 “!important”를 적용
  => 예)
   .area p {
      color: green !important;
   }