[CSS] 선택자

선택자

태그로 선택

특정 태그로 작성된 요소들을 선택한다.

<pre>태그종류 {...}</pre>로 사용할 수 있다.

 

예를 들어, <pre>div {...}</pre>는 div 태그로 작성된 요소들을 선택한다.

 

id로 선택

특정 id를 갖는 요소들만 선택한다.

<pre>#id이름 {...}</pre>으로 사용할 수 있다.

 

예를 들어, <pre>#root {...}</pre>는 root라는 id를 가지는 요소를 선택한다.

 

하나의 id는 하나의 요소에만 해당하고, 하나의 요소는 최대 하나의 id만 갖는 것을 원칙으로 한다.

 

class로 선택

특정 class를 갖는 요소들만 선택한다.

<pre>.class이름 {...}</pre>로 사용할 수 있다.

 

예를 들어, <pre>.parent {...}</pre>는 parent라는 클래스에 해당하는 요소들만 선택한다.

 

복합 선택

여러 속성/특성들을 함께 지니고 있는 요소들을 선택할 수 있다.

<pre>선택자1선택자2 {...}</pre>로 사용할 수 있다.

 

예를 들어, <pre>div.parent {...}</pre>는 parent라는 클래스를 가진 div가 선택된다.

 

속성값으로 선택

특정 속성이 어떤 값을 갖는지로 요소를 선택할 수 있다.

• <pre>선택자[속성명=값]</pre> : 속성의 값이 동일한 요소들을 선택한다.
• <pre>선택자[속성명^=값]</pre> : 속성이 해당 값으로 시작하는 요소들을 선택한다.
• <pre>선택자[속성명$=값]</pre> : 속성이 해당 값으로 끝나는 요소들 선택한다.  → 주로 파일 타입에 따라 선택할 때 사용한다.

 

자손 선택

Path를 나열하는 방식으로 자손들을 선택할 수 있다.

 

• 띄어쓰기로 붙임
  • 해당되는 아래 자손 모두 선택한다.
  • 예 : <pre>.parent .child {...} </pre>
• <pre>></pre>을 통해 연결
  • 직계 자식(바로 아래 자식)만 선택한다.
  • 아래 예시에서 .parent의 자식의 자식이 child라는 클래스를 가지고 있더라도 선택되지 않는다.
  • 예 : <pre>.parent > .child {...}</pre>

 

---

가상 클래스 선택자

가상 클래스의 적용 순서는 link → visited → hover → active 순으로 해야한다.

순서를 지키지 않으면 예상과 다른 결과가 나타날 수 있다.

 

링크 가상 클래스

링크를 제어하기 위한 가상 클래스이다.

 

• <pre>:link</pre> : 아직 열린 적 없는 페이지로의 링크에 적용된다.
• <pre>:visited</pre> : 이미 열린 적 있는 페이지로의 링크에 적용된다.

 

다이나믹 가상 클래스

사용자의 입력에 반응해서 스타일을 제어하기 위한 가상 클래스이다.

 

• <pre>:hover</pre> : 특정 요소를 마우스 커스 등으로 가리키는 경우
• <pre>:active</pre> : 마우스로 클릭하거나 실행 키를 누를 대 표시
• <pre>:focus</pre> : 단축키나 탭키 등의 키보드 입력에 의한 포커스가 될 때 표시