CSS Referenz
Verwende diese CSS-Referenz für einen alphabetischen Index aller Standard-CSS-Eigenschaften, Pseudoklassen, Pseudoelemente, Datentypen und @-Regeln. Du kannst eine Liste aller Selektoren und eine Liste aller Konzepte ansehen. Dies beinhaltet auch eine kurze Referenz zu DOM-CSS / CSSOM.
Grundlegende Syntax von Regeln
Syntax von Stilregeln
selektorliste { eigenschaft: wert; [weitere eigenschaft:wert; Paare] } ... wobei selektorliste: selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten] Siehe Listen aller Selektoren, Pseudo-Klassen und Pseudo-Elemente weiter unten.
Beispiele für Stilregeln
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe diese Anleitung (en-US). Beachte, dass jeder CSS-Syntax (en-US)-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) text-basiert sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) objekt-basiert ist.
Syntax von @-Regeln
Da die Struktur von @-Regeln stark variiert, schaue bitte bei @-Regel nach, um die Syntax der gewünschten Regel herauszufinden.
Index
Hinweis: Die Bezeichnungen der Eigenschaften enthalten nicht die JavaScript-Namen (en-US), wenn sie sich von den CSS-Standardbezeichnern unterscheiden.
accent-color
(en-US):active
additive-symbols (@counter-style)
(en-US)::after (:after)
align-content
align-items
align-self
align-tracks
(en-US)all
<an-plus-b>
<angle>
<angle-percentage>
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timeline
(en-US)animation-timing-function
@annotation
(en-US)annotation()
(en-US):any-link
(en-US)appearance
ascent-override (@font-face)
(en-US)aspect-ratio
(en-US)attr()
::backdrop
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
(en-US)background-position-y
(en-US)background-repeat
background-size
<basic-shape>
::before (:before)
:blank
(en-US)bleed (@page)
<blend-mode>
(en-US)block-overflow
block-size
(en-US)blur()
(en-US)border
border-block
(en-US)border-block-color
(en-US)border-block-end
(en-US)border-block-end-color
(en-US)border-block-end-style
(en-US)border-block-end-width
(en-US)border-block-start
(en-US)border-block-start-color
(en-US)border-block-start-style
(en-US)border-block-start-width
(en-US)border-block-style
(en-US)border-block-width
(en-US)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
(en-US)border-end-start-radius
(en-US)border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-inline
(en-US)border-inline-color
(en-US)border-inline-end
(en-US)border-inline-end-color
(en-US)border-inline-end-style
(en-US)border-inline-end-width
(en-US)border-inline-start
(en-US)border-inline-start-color
(en-US)border-inline-start-style
(en-US)border-inline-start-width
(en-US)border-inline-style
(en-US)border-inline-width
(en-US)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
(en-US)border-start-start-radius
(en-US)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
(en-US)box-shadow
box-sizing
break-after
break-before
(en-US)break-inside
brightness()
(en-US)
calc()
caption-side
caret-color
(en-US)@character-variant
(en-US)character-variant()
(en-US)@charset
:checked
(en-US)circle()
clamp()
(en-US)clear
clip
clip-path
<color>
color
color-scheme
(en-US)column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
conic-gradient()
(en-US)contain
(en-US)content
content-visibility
(en-US)contrast()
(en-US)<counter>
(en-US)counter-increment
counter-reset
counter-set
(en-US)@counter-style
(en-US)counters()
(en-US)cross-fade()
(en-US)cubic-bezier()
(en-US)::cue
(en-US)::cue-region
(en-US):current
(en-US)cursor
<custom-ident>
length#cap
length#ch
length#cm
angle#deg
:default
:defined
(en-US)descent-override (@font-face)
(en-US)<dimension>
(en-US):dir
direction
:disabled
display
<display-box>
(en-US)<display-inside>
(en-US)<display-internal>
(en-US)<display-legacy>
(en-US)<display-listitem>
(en-US)<display-outside>
(en-US)drop-shadow()
(en-US)resolution#dpcm
resolution#dpi
resolution#dppx
fallback (@counter-style)
(en-US)filter
<filter-function>
(en-US):first
:first-child
::first-letter (:first-letter)
(en-US)::first-line (:first-line)
(en-US):first-of-type
fit-content()
(en-US)<flex>
(en-US)flex
(en-US)flex-basis
(en-US)flex-direction
(en-US)flex-flow
flex-grow
flex-shrink
flex-wrap
flex_value#fr
(en-US)float
:focus
:focus-visible
(en-US):focus-within
(en-US)font
font-display (@font-face)
(en-US)@font-face
(en-US)font-family
font-family (@font-face)
(en-US)font-feature-settings
font-feature-settings (@font-face)
@font-feature-values
(en-US)font-kerning
(en-US)font-language-override
(en-US)font-optical-sizing
(en-US)font-size
font-size-adjust
(en-US)font-stretch
(en-US)font-stretch (@font-face)
(en-US)font-style
font-style (@font-face)
(en-US)font-synthesis
(en-US)font-variant
font-variant (@font-face)
(en-US)font-variant-alternates
(en-US)font-variant-caps
(en-US)font-variant-east-asian
(en-US)font-variant-ligatures
(en-US)font-variant-numeric
(en-US)font-variant-position
(en-US)font-variation-settings
(en-US)font-variation-settings (@font-face)
(en-US)font-weight
font-weight (@font-face)
(en-US)forced-color-adjust
(en-US)format()
(en-US)<frequency>
<frequency-percentage>
(en-US):fullscreen
:future
(en-US)
angle#grad
gap
<gradient>
::grammar-error
(en-US)grayscale()
(en-US)grid
grid-area
(en-US)grid-auto-columns
(en-US)grid-auto-flow
(en-US)grid-auto-rows
(en-US)grid-column
(en-US)grid-column-end
(en-US)grid-column-start
(en-US)grid-row
(en-US)grid-row-end
(en-US)grid-row-start
(en-US)grid-template
(en-US)grid-template-areas
grid-template-columns
(en-US)grid-template-rows
(en-US)
frequency#Hz
hanging-punctuation
(en-US):has
(en-US)height
height (@viewport)
(en-US)@historical-forms
:host()
(en-US):host-context()
:hover
hsl()
hsla()
hue-rotate()
(en-US)hwb()
hyphenate-character
(en-US)hyphens
<ident>
(en-US)<image>
image()
image-orientation
image-rendering
image-resolution
(en-US)image-set()
(en-US)@import
:in-range
:indeterminate
inherit
inherits (@property)
(en-US)initial
initial-letter
(en-US)initial-letter-align
(en-US)initial-value (@property)
(en-US)inline-size
(en-US)input-security
inset
(en-US)inset()
inset-block
(en-US)inset-block-end
(en-US)inset-block-start
(en-US)inset-inline
(en-US)inset-inline-end
(en-US)inset-inline-start
(en-US)<integer>
:invalid
invert()
(en-US):is
(en-US)isolation
(en-US)length#ic
length#in
:lang
:last-child
:last-of-type
@layer
(en-US)layer()
layer() (@import)
leader()
:left
(en-US)left
@left-bottom
<length>
<length-percentage>
(en-US)letter-spacing
line-break
line-clamp
line-gap-override (@font-face)
(en-US)line-height
(en-US)line-height-step
(en-US)linear-gradient()
(en-US):link
list-style
list-style-image
list-style-position
list-style-type
local()
(en-US):local-link
(en-US)
length#mm
margin
margin-block
(en-US)margin-block-end
(en-US)margin-block-start
(en-US)margin-bottom
margin-inline
(en-US)margin-inline-end
(en-US)margin-inline-start
(en-US)margin-left
margin-right
margin-top
margin-trim
(en-US)::marker
marks (@page)
mask
mask-border
(en-US)mask-border-mode
(en-US)mask-border-outset
(en-US)mask-border-repeat
(en-US)mask-border-slice
(en-US)mask-border-source
(en-US)mask-border-width
(en-US)mask-clip
(en-US)mask-composite
(en-US)mask-image
(en-US)mask-mode
(en-US)mask-origin
mask-position
(en-US)mask-repeat
mask-size
(en-US)mask-type
(en-US)masonry-auto-flow
(en-US)math-style
(en-US)matrix()
(en-US)matrix3d()
(en-US)max()
(en-US)max-block-size
(en-US)max-height
max-height (@viewport)
(en-US)max-inline-size
(en-US)max-lines
max-width
max-width (@viewport)
(en-US)max-zoom (@viewport)
(en-US)@media
min()
(en-US)min-block-size
(en-US)min-height
min-height (@viewport)
(en-US)min-inline-size
(en-US)min-width
min-width (@viewport)
(en-US)min-zoom (@viewport)
(en-US)minmax()
(en-US)mix-blend-mode
time#ms
@namespace
(en-US)negative (@counter-style)
(en-US):not
:nth-child
:nth-col
(en-US):nth-last-child
(en-US):nth-last-col
(en-US):nth-last-of-type
(en-US):nth-of-type
(en-US)<number>
object-fit
object-position
(en-US)offset
(en-US)offset-anchor
(en-US)offset-distance
(en-US)offset-path
(en-US)offset-position
(en-US)offset-rotate
(en-US):only-child
:only-of-type
(en-US)opacity
opacity()
(en-US):optional
order
orientation (@viewport)
(en-US)@ornaments
(en-US)ornaments()
(en-US)orphans
:out-of-range
outline
outline-color
outline-offset
(en-US)outline-style
(en-US)outline-width
(en-US)overflow
overflow-anchor
(en-US)overflow-block
(en-US)overflow-clip-margin
(en-US)overflow-inline
(en-US)overflow-wrap
overflow-x
(en-US)overflow-y
(en-US)overscroll-behavior
overscroll-behavior-block
(en-US)overscroll-behavior-inline
(en-US)overscroll-behavior-x
(en-US)overscroll-behavior-y
Pseudo-classes
Pseudo-elements
length#pc
length#pt
length#px
pad (@counter-style)
(en-US)padding
padding-block
(en-US)padding-block-end
(en-US)padding-block-start
(en-US)padding-bottom
padding-inline
(en-US)padding-inline-end
(en-US)padding-inline-start
(en-US)padding-left
padding-right
padding-top
@page
page-break-after
page-break-before
page-break-inside
paint()
(en-US)paint-order
(en-US)::part
(en-US):past
(en-US)path()
(en-US):paused
(en-US)<percentage>
perspective
(en-US)perspective()
(en-US)perspective-origin
(en-US):picture-in-picture
(en-US)place-content
(en-US)place-items
(en-US)place-self
(en-US)::placeholder
(en-US):placeholder-shown
:playing
(en-US)pointer-events
polygon()
<position>
position
prefix (@counter-style)
(en-US)print-color-adjust
@property
(en-US)
angle#rad
length#rem
radial-gradient()
(en-US)range (@counter-style)
(en-US)<ratio>
:read-only
(en-US):read-write
(en-US)rect()
repeat()
(en-US)repeating-linear-gradient()
(en-US)repeating-radial-gradient()
(en-US):required
resize
<resolution>
revert
(en-US)rgb()
rgba()
:right
(en-US)right
@right-bottom
:root
rotate
(en-US)rotate()
(en-US)rotate3d()
(en-US)rotateX()
(en-US)rotateY()
(en-US)rotateZ()
(en-US)row-gap
ruby-align
ruby-merge
ruby-position
(en-US)
saturate()
(en-US)scale
(en-US)scale()
(en-US)scale3d()
(en-US)scaleX()
(en-US)scaleY()
(en-US)scaleZ()
(en-US):scope
(en-US)scroll-behavior
scroll-margin
(en-US)scroll-margin-block
(en-US)scroll-margin-block-end
(en-US)scroll-margin-block-start
(en-US)scroll-margin-bottom
(en-US)scroll-margin-inline
(en-US)scroll-margin-inline-end
(en-US)scroll-margin-inline-start
(en-US)scroll-margin-left
(en-US)scroll-margin-right
(en-US)scroll-margin-top
(en-US)scroll-padding
(en-US)scroll-padding-block
(en-US)scroll-padding-block-end
(en-US)scroll-padding-block-start
(en-US)scroll-padding-bottom
(en-US)scroll-padding-inline
(en-US)scroll-padding-inline-end
(en-US)scroll-padding-inline-start
(en-US)scroll-padding-left
(en-US)scroll-padding-right
(en-US)scroll-padding-top
(en-US)scroll-snap-align
(en-US)scroll-snap-stop
(en-US)scroll-snap-type
(en-US)@scroll-timeline
(en-US)scrollbar-color
(en-US)scrollbar-gutter
(en-US)scrollbar-width
(en-US)::selection
selector()
sepia()
(en-US)<shape>
shape-image-threshold
(en-US)shape-margin
(en-US)shape-outside
(en-US)size (@page)
(en-US)size-adjust (@font-face)
(en-US)skew()
(en-US)skewX()
(en-US)skewY()
(en-US)::slotted
(en-US)speak-as (@counter-style)
(en-US)::spelling-error
(en-US)src (@font-face)
(en-US)steps()
(en-US)<string>
@styleset
(en-US)styleset()
(en-US)@stylistic
(en-US)stylistic()
(en-US)suffix (@counter-style)
(en-US)@supports
(en-US)supports() (@import)
@swash
(en-US)swash()
(en-US)symbols (@counter-style)
(en-US)symbols()
(en-US)syntax (@property)
(en-US)system (@counter-style)
(en-US)time#s
angle#turn
tab-size
table-layout
:target
(en-US)target-counter()
target-counters()
::target-text
(en-US)target-text()
:target-within
(en-US)text-align
text-align-last
text-combine-upright
(en-US)text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
(en-US)text-decoration-skip-ink
(en-US)text-decoration-style
(en-US)text-decoration-thickness
(en-US)text-emphasis
(en-US)text-emphasis-color
(en-US)text-emphasis-position
(en-US)text-emphasis-style
(en-US)text-indent
text-justify
text-orientation
(en-US)text-overflow
text-rendering
text-shadow
text-size-adjust
(en-US)text-transform
text-underline-offset
(en-US)text-underline-position
<time>
<time-percentage>
(en-US)<timing-function>
(en-US)top
@top-center
touch-action
transform
transform-box
(en-US)<transform-function>
transform-origin
transform-style
(en-US)transition
transition-delay
(en-US)transition-duration
(en-US)transition-property
transition-timing-function
(en-US)translate
translate()
(en-US)translate3d()
translateX()
(en-US)translateY()
translateZ()
type()
unicode-bidi
unicode-range (@font-face)
(en-US)unset
<url>
url()
:user-invalid
user-select
:user-valid
(en-US)user-zoom (@viewport)
(en-US)
length#vh
length#vmax
length#vmin
length#vw
:valid
(en-US)var()
(en-US)vertical-align
@viewport
viewport-fit (@viewport)
(en-US)visibility
:visited
:where
(en-US)white-space
widows
width
width (@viewport)
(en-US)will-change
(en-US)word-break
word-spacing
word-wrap
writing-mode
(en-US)
Selektoren
Einfache Selektoren
- Typselektor
Elementname
- Klassenselektor
.klassenname
- ID-Selektor
#idname
- Universalselektor
*
- Attributselektoren
[attribute="value"]
etc.
Kombinatoren
Pseudoklassen
:active
:any
(en-US):any-link
(en-US):checked
(en-US):default
:defined
(en-US):dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-visible
(en-US):host
(en-US):host()
(en-US):host-context()
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
(en-US):link
:not()
:nth-child()
:nth-last-child()
(en-US):nth-last-of-type()
(en-US):nth-of-type()
(en-US):only-child
:only-of-type
(en-US):optional
:out-of-range
:read-only
(en-US):read-write
(en-US):required
:right
(en-US):root
:scope
(en-US):target
(en-US):valid
(en-US):visited
Pseudoelemente
::after
::backdrop
::before
::cue
(en-US)::first-letter
(en-US)::first-line
(en-US)::grammar-error
(en-US) Experimental::marker
Experimental::placeholder
(en-US) Experimental::selection
::spelling-error
(en-US) Experimental
Siehe auch: Eine vollständige Liste der Selektoren in der Selectors Level 3 Spezifikation.
Konzepte
Syntax & Semantik
Werte
Layout
DOM-CSS / CSSOM
Wichtigste Objekttypen
- document.styleSheets (en-US)
- styleSheets[i].cssRules (en-US)
- cssRules[i].cssText (selector & style)
- cssRules[i].selectorText (en-US)
- elem.style (en-US)
- elem.style.cssText (en-US) (just style)
- elem.className
- elem.classList