cheat-sheet CSS-Selectors.xlsx

	A	B	C	D
1	Cheat-Sheet for CSS selectors
2	Selector	Example	Example description	CSS
3	.class	.intro	Selects all elements with class="intro"	1
4	#id	#firstname	Selects the element with id="firstname"	1
5	*	*	Selects all elements	2
6	element	p	Selects all <p> elements	1
7	element,element	div,p	Selects all <div> elements and all <p> elements	1
8	element element	div p	Selects all <p> elements inside <div> elements	1
9	element>element	div>p	Selects all <p> elements where the parent is a <div> element	2
10	element+element	div+p	Selects all <p> elements that are placed immediately after <div> elements	2
11	[attribute]	[target]	Selects all elements with a target attribute	2
12	[attribute=value]	[target=_blank]	Selects all elements with target="_blank"	2
13	[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"	2
14	[attribute\|=language]	[lang\|=en]	Selects all elements with a lang attribute value starting with "en"	2
15	:link	a:link	Selects all unvisited links	1
16	:visited	a:visited	Selects all visited links	1
17	:active	a:active	Selects the active link	1
18	:hover	a:hover	Selects links on mouse over	1
19	:focus	input:focus	Selects the input element which has focus	2
20	:first-letter	p:first-letter	Selects the first letter of every <p> element	1
21	:first-line	p:first-line	Selects the first line of every <p> element	1
22	:first-child	p:first-child	Selects every <p> elements that is the first child of its parent	2
23	:before	p:before	Insert content before every <p> element	2
24	:after	p:after	Insert content after every <p> element	2
25	:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"	2
26	element1~element2	p~ul	Selects every ul element that are preceded by a p element	3
27	[attribute^=value]	a[src^="https"]	Selects every a element whose src attribute value begins with "https"	3
28	[attribute$=value]	a[src$=".pdf"]	Selects every a element whose src attribute value ends with ".pdf"	3
29	[attribute*=value]	a[src*="w3schools"]	Selects every a element whose src attribute value contains the substring "w3schools"	3
30	:first-of-type	p:first-of-type	Selects every p element that is the first p element of its parent	3
31	:last-of-type	p:last-of-type	Selects every p element that is the last p element of its parent	3
32	:only-of-type	p:only-of-type	Selects every p element that is the only p element of its parent	3
33	:only-child	p:only-child	Selects every p element that is the only child of its parent	3
34	:nth-child(n)	p:nth-child(2)	Selects every p element that is the second child of its parent	3
35	:nth-last-child(n)	p:nth-last-child(2)	Selects every p element that is the second child of its parent, counting from the last child	3
36	:nth-of-type(n)	p:nth-of-type(2)	Selects every p element that is the second p element of its parent	3
37	:nth-last-of-type(n)	p:nth-last-of- type(2)	Selects every p element that is the second p element of its parent, counting from the last child	3
38	:last-child	p:last-child	Selects every p element that is the last child of its parent	3
39	:root	:root	Selects the document’s root element	3
40	:empty	p:empty	Selects every p element that has no children (including text nodes)	3
41	:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
42	:enabled	input:enabled	Selects every enabled input element	3
43	:disabled	input:disabled	Selects every disabled input element	3
44	:checked	input:checked	Selects every checked input element	3
45	:not(selector)	:not(p)	Selects every element that is not a p element	3
46	::selection	::selection	Selects the portion of an element that is selected by a user	3
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100