Selectors

CSS Selectors

CSS Selector(선택자)는 CSS 속성을 통해서 원하는 디자인 처리를 하고자 할 때 대상 요소를 지정하는 것을 의미한다. 즉 아래와 같은 선택자 사용 방식을 가진다.

선택자 {
    속성: 값;
}

CSS에서는 다양한 선택자 방식을 지원하고 있으며 상황과 조건에 따라 원하는 선택자를 작성하여 디자인 처리를 한다.

  • Basic

    기본 선택자
    • Attribute Selector

      요소의 속성(Attribute)을 이용한 다양한 선택자 패턴을 가지고 있다.
    • Class Selector

      요소의 class 속성을 이용한 선택자 패턴이다.
    • ID Selector

      요소의 id 속성을 이용한 선택자 패턴이다.
    • Tag Type Selector

      요소의 태그 명을 이용한 선택자 패턴이다.
    • Universal Selector

      모든 요소를 대상으로 하는 전체 선택자 패턴이다.
  • Combinators

    결합 관계의 선택자
  • Pseudo-classes

    가상 클래스 선택자
    • :active

      요소가 활성 상태일 경우 선택자로 사용한다.
    • :checked

      input 태그의 type 속성이 radio이거나 checkbox일 때 체크된 경우에 선택자로 사용된다.
    • :default

      입력 요소 그룹 중에서 기본 값을 갖는 요소를 선택자로 사용한다.
    • :disabled

      비활성화(선택, 클릭, 입력 불가)된 요소를 선택자로 사용한다.
    • :empty

      자식 요소(텍스트, 공백 포함)가 존재하지 않는 경우에 선택자로 사용된다.
    • :enabled

      사용 가능(선택, 클릭, 입력)한 요소가 선택자로 사용된다.
    • :first

      @page rule과 함께 사용되며 인쇄될 문서의 첫번째 페이지를 선택자로 사용한다.
    • :first-child

      같은 레벨(형제) 요소 그룹 중에서 첫 번째 요소를 선택자로 사용한다.
    • :first-of-type

      같은 레벨(형제) 관계 요소 그룹 중에서 선택자와 동일한 타입의 첫 번째 요소를 선택자로 사용한다.
    • :focus

      요소가 클릭(탭)되거나 키보드의 TAB키로 이동 선택될 때 선택자로 사용이 된다.
    • :focus-within

      요소가 포커스(:focus)를 받거나 포커스(:focus)를 받은 하위 요소를 포함하는 경우에 선택자로 사용이 된다.
    • :fullscreen

      웹 브라우저가 전체 화면 모드가 될때 선택자로 사용이 된다.
    • :hover

      마우스 포인터가 요소를 가리키면 선택자로 사용이 된다.
    • :in-range

      입력 요소의 값이 min과 max 속성의 설정 값 내에 있는 경우 선택자로 사용이 된다.
    • :invalid

      유효하지 않은 값을 가진 폼 요소를 선택자로 사용한다.
    • :lang()

      가상 클래스 함수이며 언어 코드를 인수로 지정하면 일치하는 lang 속성 값을 가진 요소를 선택자로 사용한다.
    • :last-child

      같은 레벨(형제) 요소 그룹 중에서 마지막 요소를 선택자로 사용한다.
    • :last-of-type

      같은 레벨(형제) 관계 요소 그룹 중에서 선택자와 동일한 유형의 마지막 요소를 선택자로 사용한다.
    • :left

      @page rule과 함께 사용되며 인쇄될 문서의 모든 왼쪽 페이지를 선택자로 사용한다.
    • :link

      href 속성을 가지고 있으면서 사용자가 방문한 적이 없는 경우에 선택자로 사용이 된다.
    • :not()

      부정 가상 클래스 함수로 인수로 지정된 선택자를 부정하는 요소만 선택자로 사용이 된다.
    • :nth-child()

      같은 레벨(형제) 관계의 요소 그룹에서 인수로 지정한  순서에  해당하는 요소를 선택자로 사용한다. 숫자, 키워드, 공식을 인수로 사용할 수 있다.
    • :nth-last-child()

      같은 레벨(형제) 요소 그룹 중에서 뒤에서 부터 인수로 지정된 위치 값으로 요소를 선택자로 사용한다. 숫자, 키워드, 공식을 인수로 사용할 수 있다.
    • :nth-last-of-type()

      같은 레벨(형제) 요소 그룹 내에서 선택자와 동일한 타입을 기준으로 뒤에서 부터의 위치 값을 인수로 지정해 해당되는 요소를 선택자로 사용한다. 숫자, 키워드, 공식을 인수로 사용할 수 있다.
    • :nth-of-type()

      같은 레벨(형제) 요소 그룹 (단위)내에서 선택자와 동일한 타입을 갖는 대상중에 인수로 지정된 위치(순서) 값을 갖는 요소를 선택자로 사용한다. 숫자, 키워드, 공식을 인수로 사용할 수 있다.
    • :only-child

      동등 레벨(형제)이 없는 단일 요소를 선택자로 사용한다.
    • :only-of-type

      선택자와 동일한 타입으로서 동등 레벨(형제)이 없는 단일 요소인 경우에만 선택자로 사용된다.
    • :optional

      필수 입력을 의미하는 속성인 required가 설정되어 있지 않은 input, select, textarea 요소를 선택자로 사용한다.
    • :out-of-range

      입력 요소의 값이 min과 max 속성의 설정 값 범위 밖에 있는 경우 선택자로 사용이 된다.
    • :placeholder-shown

      placehoder로 표시되는 키보드 입력 요소의 스타일 처리를 위한 선택자로 사용된다. 실제 입력을 시작하면 선택자로 사용이 안된다.
    • :read-only

      읽기 전용 입력 요소(input, textarea)인 경우에 선택자로 사용이 된다.
    • :read-write

      편집 가능한 입력 요소(input, textarea)인 경우에 선택자로 사용이 된다.
    • :required

      필수 입력 속성(required)이 지정된 input, select, textarea 요소를 선택자로 사용한다.
    • :right

      @page rule과 함께 사용되며 인쇄될 문서의 모든 오른쪽 페이지를 선택자로 사용한다.
    • :root

      웹 문서의 최상위 요소를 선택자로 사용한다. 특이점이 높다는 것을 제외하면 웹 문서의 최상위 요소인 html 선택자와 동일하다.
    • :target

      URL 해쉬와 일치하는 id를 가진 유일한 요소를 선택자로 사용한다.
    • :valid

      유효한 값을 가진 폼 요소를 선택자로 사용한다.
    • :visited

      href 속성을 가지고 있으면서 방문한 적이 있는 경우에 선택자로 사용이 된다.
  • Pseudo-elements

    가상 요소 선택자
    • ::after

      선택자를 갖는 요소 내 콘텐츠 뒤쪽에 가상 요소를 만들어 선택자로 사용한다.
    • ::before

      선택자를 갖는 요소 내 콘텐츠 앞쪽에 가상 요소를 만들어 선택자로 사용한다.
    • ::first-letter

      선택자를 갖는 block 요소 내의 첫 번째 행의 첫 글자를 선택자로 사용한다. 주의할 점은 이미지, inline 타입의 표(table)가 존재하지 않아야 한다.
    • ::first-line

      선택자를 갖는 block 요소 내의 첫 번째 행을 선택자로 사용한다.
    • ::selection

      선택자를 갖는 요소 내의 텍스트를 드래그하여 블럭으로 잡는 경우에 선택자로 사용이 된다.