[CSS] 선택자

📝 목차

• 선택자

  • 태그로 선택
  • id로 선택
  • class로 선택
  • 복합 선택
  • 속성값으로 선택
  • 자손 선택
• 가상 클래스 선택자

  • 링크 가상 클래스
  • 다이나믹 가상 클래스
  • 'Coding > [Web] Frontend' 카테고리의 다른 글

---

선택자

태그로 선택

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

태그종류 {...}로 사용할 수 있다.

 

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

 

id로 선택

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

#id이름 {...}으로 사용할 수 있다.

 

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

 

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

 

class로 선택

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

.class이름 {...}로 사용할 수 있다.

 

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

 

복합 선택

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

선택자1선택자2 {...}로 사용할 수 있다.

 

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

 

속성값으로 선택

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

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

 

자손 선택

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

 

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

 

---

가상 클래스 선택자

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

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

 

링크 가상 클래스

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

 

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

 

다이나믹 가상 클래스

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

 

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