CSS リファレンス
この CSS リファレンス は、すべての標準 CSS プロパティ、擬似クラス、擬似要素、データ型、関数記法、アットルール のアルファベット順の索引として利用できます。また、すべての CSS 種類別セレクター の一覧および 重要な CSS の概念 の一覧もあります。また、簡単な DOM-CSS / CSSOM リファレンス も含まれています。
基本的なルールと構文
スタイルルールの構文
スタイルルール ::=
セレクターリスト {
プロパティリスト
}
ここで、
セレクターリスト ::=
セレクター[:擬似クラス] [::擬似要素]
[, セレクターリスト]
プロパティリスト ::=
[プロパティ : 値] [; プロパティリスト]
下記の セレクター、擬似クラス、擬似要素 の一覧を参照してください。 各指定値の構文は、各指定プロパティに定義されたデータ型に依存します。
スタイルルールの例
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
初心者レベルの CSS セレクター構文への入門については、 CSS セレクターのガイドをご覧ください。ルール定義内での CSS 構文 エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて (ASCII) テキストベース であり、DOM-CSS / CSSOM (ルール管理システム) は オブジェクトベース なので注意してください。
アットルールの構文
アットルールの構造は様々であるため、知りたい構文について調べるにはアットルールのページをご覧ください。
索引
メモ: この索引は、SVG 要素上で CSS プロパティとして使える SVG 専用プレゼンテーション属性を含んでいません。
メモ: この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。
-
A
abs()
accent-color
acos()
:active
additive-symbols (@counter-style)
::after (:after)
align-content
align-items
align-self
align-tracks
all
<an-plus-b>
anchor-name
anchor-scope
<angle>
<angle-percentage>
animation
animation-composition
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-range
animation-range-end
animation-range-start
animation-timeline
animation-timing-function
@annotation
:any-link
appearance
ascent-override (@font-face)
asin()
aspect-ratio
atan()
atan2()
attr()
B
::backdrop
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
base-palette (@font-palette-values)
<basic-shape>
::before (:before)
:blank
bleed (@page)
<blend-mode>
block-size
blur()
border
border-block
border-block-color
border-block-end
border-block-end-color
border-block-end-style
border-block-end-width
border-block-start
border-block-start-color
border-block-start-style
border-block-start-width
border-block-style
border-block-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-end-end-radius
border-end-start-radius
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline
border-inline-color
border-inline-end
border-inline-end-color
border-inline-end-style
border-inline-end-width
border-inline-start
border-inline-start-color
border-inline-start-style
border-inline-start-width
border-inline-style
border-inline-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-start-end-radius
border-start-start-radius
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
@bottom-center
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
brightness()
C
calc()
caption-side
caret
caret-color
caret-shape
@character-variant
@charset
:checked
circle()
clamp()
clear
clip
clip-path
clip-rule
<color>
color
color-interpolation-filters
color-scheme
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
conic-gradient()
contain
contain-intrinsic-block-size
contain-intrinsic-height
contain-intrinsic-inline-size
contain-intrinsic-size
contain-intrinsic-width
container
container-name
container-type
content
content-visibility
contrast()
cos()
<counter>
counter-increment
counter-reset
counter-set
@counter-style
counters()
cross-fade()
cubic-bezier()
::cue
::cue-region
:current
cursor
<custom-ident>
cx
cy
length#cap
length#ch
length#cm
D
angle#deg
d
<dashed-ident>
:default
:defined
descent-override (@font-face)
<dimension>
:dir
direction
:disabled
display
<display-box>
<display-inside>
<display-internal>
<display-legacy>
<display-listitem>
<display-outside>
dominant-baseline
drop-shadow()
resolution#dpcm
resolution#dpi
resolution#dppx
E
F
fallback (@counter-style)
field-sizing
fill
fill-opacity
fill-rule
filter
<filter-function>
:first
:first-child
::first-letter (:first-letter)
::first-line (:first-line)
:first-of-type
fit-content()
<flex>
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
flex_value#fr
float
:focus
:focus-visible
:focus-within
font
font-display (@font-face)
@font-face
font-family
font-family (@font-face)
font-family (@font-palette-values)
font-feature-settings
font-feature-settings (@font-face)
@font-feature-values
font-kerning
font-language-override
font-optical-sizing
font-palette
@font-palette-values
font-size
font-size-adjust
font-stretch
font-stretch (@font-face)
font-style
font-style (@font-face)
font-synthesis
font-synthesis-position
font-synthesis-small-caps
font-synthesis-style
font-synthesis-weight
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-variation-settings (@font-face)
font-weight
font-weight (@font-face)
forced-color-adjust
format()
<frequency>
<frequency-percentage>
:fullscreen
:future
G
angle#grad
gap
<gradient>
::grammar-error
grayscale()
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-start
grid-row
grid-row-end
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
H
frequency#Hz
hanging-punctuation
:has
height
@historical-forms
:host()
:host-context()
:hover
hsl()
hue-rotate()
hwb()
hyphenate-character
hyphenate-limit-chars
hyphens
hypot()
I
<ident>
<image>
image()
image-orientation
image-rendering
image-resolution
image-set()
@import
:in-range
:indeterminate
inherit
inherits (@property)
initial
initial-letter
initial-letter-align
initial-value (@property)
inline-size
input-security
inset
inset()
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
<integer>
interpolate-size
:invalid
invert()
:is
isolation
length#ic
length#in
J
K
L
lab()
:lang
:last-child
:last-of-type
@layer
layer()
layer() (@import)
lch()
leader()
:left
left
@left-bottom
<length>
<length-percentage>
letter-spacing
light-dark()
line-break
line-clamp
line-gap-override (@font-face)
line-height
line-height-step
<line-style>
linear-gradient()
:link
list-style
list-style-image
list-style-position
list-style-type
local()
:local-link
log()
M
length#mm
margin
margin-block
margin-block-end
margin-block-start
margin-bottom
margin-inline
margin-inline-end
margin-inline-start
margin-left
margin-right
margin-top
margin-trim
::marker
marker
marker-end
marker-mid
marker-start
marks (@page)
mask
mask-border
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
masonry-auto-flow
math-depth
math-shift
math-style
matrix()
matrix3d()
max()
max-block-size
max-height
max-inline-size
max-lines
max-width
@media
min()
min-block-size
min-height
min-inline-size
min-width
minmax()
mix-blend-mode
mod()
time#ms
N
@namespace
negative (@counter-style)
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
<number>
O
object-fit
object-position
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
:only-child
:only-of-type
opacity
opacity()
:optional
order
@ornaments
orphans
:out-of-range
outline
outline-color
outline-offset
outline-style
outline-width
<overflow>
overflow-anchor
overflow-block
overflow-clip-margin
overflow-inline
overflow-wrap
overflow-x
overflow-y
overlay
override-colors (@font-palette-values)
overscroll-behavior
overscroll-behavior-block
overscroll-behavior-inline
overscroll-behavior-x
overscroll-behavior-y
P
Pseudo-classes
Pseudo-elements
length#pc
length#pt
length#px
pad (@counter-style)
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
@page
page
page-break-after
page-break-before
page-break-inside
page-orientation (@page)
paint()
paint-order
::part
:past
path()
:paused
<percentage>
perspective
perspective()
perspective-origin
:picture-in-picture
place-content
place-items
place-self
::placeholder
:placeholder-shown
:playing
pointer-events
polygon()
<position>
position
position-anchor
position-area
@position-try
position-try
position-try-fallbacks
position-try-order
position-visibility
pow()
prefix (@counter-style)
print-color-adjust
@property
Q
R
angle#rad
length#rem
r
radial-gradient()
range (@counter-style)
<ratio>
ray()
:read-only
:read-write
rect()
rem()
repeat()
repeating-conic-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
:required
resize
<resolution>
reversed()
revert
rgb()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
round()
row-gap
ruby-align
ruby-merge
ruby-position
rx
ry
S
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
@scope
scroll()
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
scroll-timeline
scroll-timeline-axis
scroll-timeline-name
scrollbar-color
scrollbar-gutter
scrollbar-width
::selection
selector()
sepia()
<shape>
shape-image-threshold
shape-margin
shape-outside
shape-rendering
sign()
sin()
size (@page)
size-adjust (@font-face)
skew()
skewX()
skewY()
::slotted
speak-as (@counter-style)
::spelling-error
sqrt()
src (@font-face)
@starting-style
steps()
<string>
stroke
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
@styleset
@stylistic
suffix (@counter-style)
@supports
supports() (@import)
@swash
symbols (@counter-style)
symbols()
syntax (@property)
system (@counter-style)
time#s
T
angle#turn
tab-size
table-layout
tan()
:target
target-counter()
target-counters()
::target-text
target-text()
:target-within
text-align
text-align-last
text-anchor
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-skip-ink
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-justify
text-orientation
text-overflow
text-rendering
text-shadow
text-size-adjust
text-spacing-trim
text-transform
text-underline-offset
text-underline-position
text-wrap
text-wrap-mode
text-wrap-style
<time>
<time-percentage>
timeline-scope
top
@top-center
touch-action
transform
transform-box
<transform-function>
transform-origin
transform-style
transition
transition-behavior
transition-delay
transition-duration
transition-property
transition-timing-function
translate
translate()
translate3d()
translateX()
translateY()
translateZ()
type()
U
V
length#vh
length#vmax
length#vmin
length#vw
:valid
var()
vector-effect
vertical-align
view()
view-timeline
view-timeline-axis
view-timeline-inset
view-timeline-name
::view-transition
::view-transition-group
::view-transition-image-pair
view-transition-name
::view-transition-new
::view-transition-old
visibility
:visited
W
:where
white-space
white-space-collapse
widows
width
will-change
word-break
word-spacing
word-wrap
writing-mode
X
Y
Z
Others
セレクター
以下は様々なセレクターで、DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。
基本セレクター
グループ化セレクター
- セレクターリスト
A, B
-
A
とB
の両方の要素が選択されることを指定します。これは複数の一致する要素をグループ化する方法です。
結合子
結合子 (Combinator) は 2 つ以上の単純セレクターの関係、例えば「A
は B
の子である」や「A
は B
の子孫である」などを確立し、複合セレクターを作成するためのセレクターです。
- 次兄弟結合子
A + B
-
A
とB
のそれぞれで選択された要素が同じ親を持ち、かつB
で選択された要素がA
で選択された要素の水平的な直後にあることを指定します。 - 後続兄弟結合子
A ~ B
-
A
とB
のそれぞれで選択された要素が同じ親を共有しており、かつA
で選択された要素がB
の前に — ただし直前である必要はありませんが — 来た場合を指定します。 - 子結合子
A > B
-
B
で選択された要素のうち、A
で選択された要素の直接の子であるものを指定します。 - 子孫結合子
A B
-
B
で選択された要素のうち、A
で選択された要素の子孫であるものを指定します。直接の子である必要はありません。 - 列結合子
A || B
Experimental -
B
で指定された要素のうち、A
で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。
擬似クラスと擬似要素
Selectors Level 4 仕様書におけるセレクターおよび擬似要素の仕様書も参照してください。
概念
構文と意味
値
レイアウト
DOM-CSS / CSSOM
主なオブジェクトの種類
重要なメソッド
関連情報
- Mozilla CSS 拡張 (
-moz-
接頭辞付き) - WebKit CSS 拡張 (ほとんどが
-webkit-
接頭辞付き)