Andreas Rozek
[ Impressum ]   [ Datenschutzerklärung ]   [ Kontakt ]   [ ]

CSS Selektoren (Kurzübersicht)

Basic CSS Selectors
tag elements of type "tag"
.class elements with class "class"
tag.classelements of type "tag" and also with class "class"
#id elements with id "id"
* all elements (normally used with combinators)
CSS Selector Grouping
x,y,zelements of any given selector
CSS Pseudo Class Selectors
x:hover x while mouse pointer over it
x:active x while mouse pointer pressed
a:link unvisited link
a:visited visited link
x:fullscreenx while in fullscreen mode
CSS <form> Element Pseudo Class Selectors
x:checked x if in "checked" state
x:default x if it represents the default in its group
x:disabled x if disabled
x:enabled x if enabled (i.e., not disabled)
x:empty x if empty
x:focus x if it owns the keyboard focus
x:focus-within x if itself or a descendant owns focus
x:indeterminatex if its state is indeterminate
x:invalid x if its value does not validate successfully
x:optional x if its "required" attribute was not set
x:required x if its "required" attribute was set
x:read-only x if its "readonly" attribute was set
x:read-write x if its "readonly" attribute was not set
x:valid x if its value validates successfully
CSS Pseudo Element Selectors
x::first-letterfirst letter of x
x::first-line first line of x
x::selection user-selected text
x::before inserts content before x
x::after inserts content after x
General CSS Combinators
x y general descendant y of x (y may be *)
x > ydirect descendant y of x (child, y may be *)
x + yadjacent sibling y of x (y may be *)
x ~ ygeneral sibling y of x (y may be *)
CSS Child Combinators
x:only-child x if only child of its parent
x:first-child x if 1st child of its parent
x:last-child x if last child of its parent
x:nth-child(n) x if nth child of its parent
x:nth-last-child(n) x if nth-last child of its parent
x:only-of-type x if only of its type in its parent
x:first-of-type x if first of its type in its parent
x:last-of-type x if last of its type in its parent
x:nth-of-type(n) x if nth of its type in its parent
x:nth-last-of-type(n)x if nth-last of its type in its parent
Some Examples for "n"
evenevery even numbered element
2n (same as above)
odd every odd numbered element
2n+1(same as above)
3n elements no. 3,6,9,...
3n+1elements no. 1,4,7,...
3n+2elements no. 2,5,8,...
n+5 5th element and following
-n+41st to 4th element
CSS Attribute Selectors
x[attr] x if attribute "attr" is present
x[attr="val"] x if value of "attr" equals "val"
x[attr*="val"]x if value of "attr" contains "val"
x[attr~="val"]x if "attr" contains whitespace-sep. value "val"
x[attr|="val"]x if "attr" contains hyphen-separated value "val"
x[attr^="val"]x if value of "attr" begins with "val"
x[attr$="val"]x if value of "attr" ends with "val"
add " i" before "]" for case-insensitive matches
Miscellaneous Other CSS Selectors
x:not(y)x if y does not apply
x:empty x if it contains neither text nor elements
:root the <html> element
:scopeelement used as reference for other selectors
:target element whose id matches document URL fragment