-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
207 lines (187 loc) · 9.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<head>
<title>Batificity</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Not the css specificity guide you deserve, but the one you need right now." />
<meta name="title" content="Batificity - A guide to CSS Specificity" />
<!-- Social Media Data -->
<meta property="og:title" content="Batificity - A guide to CSS Specificity" />
<meta property="og:url" content="https://batificity.com/" />
<meta property="og:site_name" content="Batificity" />
<meta property="og:description" content="Not the css specificity guide you deserve, but the one you need right now." />
<meta property="og:image" content="#" />
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section class="intro" id="batificity">
<div class="content">
<h1>Batificity</h1>
<p class="help">Not the css specificity guide you deserve, but the one you need right now.</p>
</div>
</section>
<!-- Inline Styles -->
<div id="batificity-modal" class="modal">
<div class="modal__content">
<h2>What is Specificity?</h2>
<p>Specificity determines which CSS rule is applied by the browser.</p>
<p>Rules with more specific selectors have a greater specificity, if two selectors apply to the same element, the one with higher specificity wins.</p>
<p>When selectors have an equal weight, the last rule defined is the one that counts.</p>
<p>Combinators ( +, >, ~ ) allow for more specific targeting, but do not increase specificity.</p>
<button class="button">Got it!</button>
</div>
</div>
<section id="gotham">
<div class="content">
<h2>Gotham</h2>
<h3 class="help">The Page</h3>
<p>The place containing the many things that make up Gotham City.</p>
</div>
</section>
<!-- Modal -->
<div id="gotham-modal" class="modal">
<div class="modal__content">
<h2>What is the page?</h2>
<p>The page is your html document where your html and selectors exist.</p>
<p>CSS specificity applies in the context of that page.</p>
<button class="button">Got it!</button>
</div>
</div>
<section id="batman">
<div class="content">
<h2>#batman</h2>
<h3 class="help">ID Selector</h3>
<p>There can only be one Batman (id) in Gotham City (the page).</p>
<p>ID's have a higher specificity than classes, pseudo-elements/classes and attributes.</p>
<p class="power">Strength <span>1:0:0</span></p>
</div>
</section>
<!-- Batman Modal -->
<div id="batman-modal" class="modal">
<div class="modal__content">
<h2>More about IDs</h2>
<p>An ID is an identifier for your page elements, such as #div. ID selectors have a higher specificity than other selectors.</p>
<p>For example, the selector <span class="code">#batman</span> is more specific than the attribute selector <span class="code">[id=batman]</span> or the class selector <span class="code">.robin</span></p>
<button class="button">Got it!</button>
</div>
</div>
<section id="robin">
<div class="content">
<h2>.robin</h2>
<h3 class="help">Class selector</h3>
<p>There are many robins, they come and go and sometimes exist at the same time.</p>
<p>It doesn’t matter how many robins you have, you cannot beat Batman.
</p>
<p class="power">Strength <span>0:1:0</span></p>
</div>
</section>
<!-- Classes/Robin Modal -->
<div id="robin-modal" class="modal">
<div class="modal__content">
<h2>More about Classes</h2>
<p>You can have more than one of the same class per page. Classes have the same specificity as pseudo elements and attribute selectors, but a lower specificity than an ID.</p>
<p>Classes can be chained to increase specificity (but this will not override an ID).<br>
<span class="code">.robin</span> gives you a strength of 0:1:0<br><span class="code">.robin.red-hood</span> would give you a strength of 0:2:0</p>
<button class="button">Got it!</button>
</div>
</div>
<section id="batmobile">
<div class="content">
<h2>The Batmobile</h2>
<h3 class="help">Attribute selector</h3>
<p>Attributes e.g. [target] are Batman's major gadgets, like the Batmobile. They work on their own, but also when added to a Batman or a Robin you get a strength boost.
</p>
<p>It doesn't matter how many gadgets Robin has he still can't beat batman.
</p>
<p class="power">Strength <span>0:1:0</span></p>
</div>
</section>
<!-- Batmobile/Attributes Modal -->
<div id="batmobile-modal" class="modal">
<div class="modal__content">
<h2>More about Attributes</h2>
<p>An attribute selector matches elements which have a specific attribute or its value for example:
<span class="code">a[title]</span> matches all a-elements which have a title attribute.</p>
<p>Attribute selectors have the same weight as classes and pseudo-elements/classes.</p>
<button class="button">Got it!</button>
</div>
</div>
<section id="utility-belt">
<div class="content">
<h2>Utility Belt</h2>
<h3 class="help">Pseudo-element/class selector</h3>
<p>Pseudo-elements/classes are the utility belt, they aren't very useful on their own but when you add them to something else they increase your strength.</p>
<p class="power">Strength <span>0:1:0</span></p>
</div>
</section>
<!-- Utility belt Modal -->
<div id="utility-belt-modal" class="modal">
<div class="modal__content">
<h2>More about pseudo-elements/classes</h2>
<p>Pseudo classes are special classes that are used to define the behavior of HTML elements: e.g. <span class="code">a:hover</span> applys on hover of an element.</p>
<p>Pseudo-elements allow you to assign styles to content that does not exist in the page. e.g. <span class="code">.batman:after</span> adds an additional element you can style. The question marks on this page are pseudo elements.</p>
<button class="button">Got it!</button>
</div>
</div>
<section id="alfred">
<div class="content">
<h2><Alfred></h2>
<h3 class="help">Element Tag Selector</h2>
<p>Elements are like Alfred. Batman and Robin can't live without him, but he can't beat Batman or Robin in a fight.</p>
<p class="power">Strength <span>0:0:1</span></p>
</div>
</section>
<!-- Alfred/Elements Modal -->
<div id="alfred-modal" class="modal">
<div class="modal__content">
<h2>More about element tags</h2>
<p>An element selector is the element that is linked to a particular style. e.g. <span class="code">a</span> targets the link tag directly.</p>
<p>These have the lowest specificity weight and are therefore the easiest to override.</p>
<p>The <span class="code">a</span> selector has a weight of 0:0:1 whereas <span class="code">a.robin</span> has a weight of 0:1:1, which is still lower than an ID.</p>
<button class="button">Got it!</button>
</div>
</div>
<section id="bruce-wayne">
<div class="content">
<h2>Bruce Wayne</h2>
<h3 class="help">Inline Styles <styles></h3>
<p>Batman must always protect his secret identity so Bruce will override any Batman that might exist.</p>
<p>Bruce Wayne (like inline styles) exist publicly in Gotham (the page). Batman and the rest of the css exists in the external stylesheet.</p>
<p class="power">Strength <span>Power: 1:0:0:0</span></p>
</div>
</section>
<!-- Bruce Wayne/Inline Styles Modal -->
<div id="bruce-wayne-modal" class="modal">
<div class="modal__content">
<h2>Inline Styles</h2>
<p>An inline style lives directly within your page and is attached to the element to be styled. For example:<br>
<span class="code"><div style="background:red;"></div></span></p>
<p>Because inline styles exist directly on the element they override IDs, classes, pseudo-elements and attributes.</p>
<button" class="button">Got it!</button>
</div>
</div>
<section id="the-bomb">
<div class="content">
<h2>The Bomb</h2>
<h3 class="help">!important</h3>
<p>!important is a nuclear weapon. Use this and you've defeated Batman, Robin, Alfred and their gadgets. With great power comes great responsibility, don’t abuse it.</p>
<p class="power">Strength <span>1:0:0:0:0</span></p>
</div>
</section>
<!-- Important-->
<div id="the-bomb-modal" class="modal">
<div class="modal__content">
<h2>What is !Important?</h2>
<p>!important takes highest precendence, even over inline styles.</p>
<p>To override you have to declare another style using !important with the same or higher specificity. For this reason you should only be using !important for debugging.</p>
<p>If you are using !important regulary you should revisit your css specificity. It is incredibly rare to need it in your stylesheets.</p>
<button class="button">Got it!</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/jquery.waypoints.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/inview.js"></script>
<script src="js/main.js"></script>
</body>
</html>