CSS 참고서를 사용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, 자료형@-규칙을 탐색하세요. 또한 유형별로 정리한 모든 CSS 선택자주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 포함하고 있습니다.

기본 규칙 구문

스타일 규칙 구문

selectorlist {
  property: value;
  [more property:value; pairs]
}

... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]

아래 선택자, 의사 클래스, 의사 요소 목록을 참고하세요.

스타일 규칙 예제

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

CSS 선택자 구문의 기초적인 소개는 튜토리얼에서 찾아보실 수 있습니다. 어느 규칙 정의에서 CSS 구문 오류가 하나라도 발생하면 해당 규칙 전체가 무효가 됨을 주의하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙은 모두 텍스트 기반이지만, DOM-CSS /  CSSOM은 객체 기반입니다.

@-규칙 구문

@-규칙의 구조는 굉장히 다양하기 때문에 원하시는 구문을 찾으시려면 at-규칙을 방문하세요.

키워드 색인

ABCDEFGHIJKLMNOPQRSTUVWXZOthers

선택자

기본 선택자

형식 선택자
이 선택자는 주어진 이름  과 일치하는 모든 요소를 선택한다.
문법: 요소명
예: input 은 모든 <input> 요소를 선택한다.
클래스 선택자
이 선택자는 class 속성의 값을 사용하여 요소를 선택한다.
문법: .클래스명
예: .index 는 클래스명이 index인 모든 요소를 선택한다. (class="index" 속성 선택자를 사용한것과 동일하다).
ID 선택자
이 선택자는 id 속성값을 사용하여 노드를 선택한다. 문서내에서 주어진 ID를 갖는 요소는 유일해야 한다.
문법: #id명
예: #toc 는 id가 toc인 요소를 선택한다. (id="toc" 속성 선택자를 사용한것과 동일하다).
통괄 선택자
이 선택자는 모든 노드들을 선택한다. 이 선택자는 하나의 네임스페이에 있고 모든 네임스페이스에도 변형된 형태가 있다.
문법: * ns|* *|*
예: * 은 문서내 모든 요소를 선택한다.
속성 선택자
이 선택자는 속성 중 한개의 값을 사용하여 선택한다.
문법: [속성] [속성=값] [속성~=값] [속성|=값] [속성^=값] [속성$=값] [속성*=값]
예: [autoplay] 는 autoplay 속성을 갖는 모든 요소를 선택한다. 속성에 어떤 값이 있어도 관계없이 일치한다.

결합자

근접 형제노드 선택자
'+' 결합자는 지정된 요소 이전요소 바로 뒤따르는 노드들을 선택한다.
문법: A + B
예: ul + li 는 <ul> 바로 뒤에 오는 모든 <li> 요소들을 선택한다.
일반 형제노드 선택자
~' 결합자는 지정된 요소  selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p> element inside the same element.
Child selectors
The '>' combinator selects nodes that are direct children of the former specified element.
Syntax: A > B
Example: ul > li will match all <li> elements that are inside a <ul> element.
Descendant selectors
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
Syntax: A B
Example: div span will match any <span> element that is inside a <div> element.

의사 클래스

  • :active
  • :any-link 
  • :blank 
  • :checked
  • :current 
  • :default
  • :defined
  • :dir() 
  • :disabled
  • :drop 
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen 
  • :future 
  • :focus
  • :focus-visible
  • :focus-within
  • :has() 
  • :host
  • :host()
  • :host-context() 
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link 
  • :matches() 
  • :not()
  • :nth-child()
  • :nth-col() 
  • :nth-last-child()
  • :nth-last-col() 
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past 
  • :placeholder-shown 
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within 
  • :user-invalid 
  • :valid
  • :visited
  • 의사 요소

  • ::after (:after)
  • ::backdrop 
  • ::before (:before)
  • ::cue (:cue)
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
  • ::grammar-error 
  • ::marker 
  • ::placeholder 
  • ::selection
  • ::slotted()
  • ::spelling-error 
  • 같이 보기: Selectors Level 3의 전체 선택자 목록.

    개념

    구문과 의미

    레이아웃

    DOM-CSS / CSSOM

    주요 객체 유형

    중요 메서드

    같이 보기

    문서 태그 및 공헌자

    최종 변경자: urty5656,