making multiple classes exaple make more sense

chrisdavidmills · chrisdavidmills · commit ac424a6dc3c4 · 2020-04-21T12:03:08.000+01:00
diff --git a/learn/selectors/class-many.html b/learn/selectors/class-many.html
@@ -13,54 +13,56 @@
 
     <style class="editable">
     .notebox {
-        border: 4px solid #666;
-        padding: .5em;
+      border: 4px solid #666;
+      padding: .5em;
     }
 
     .notebox.warning {
-        border: 4px solid orange;
-        font-weight: bold;
+      border-color: orange;
+      font-weight: bold;
     }
 
     .notebox.danger {
-        border: 4px solid red;
-        font-weight: bold;
+      border-color: red;
+      font-weight: bold;
     }
-        
+
     </style>
 </head>
 
 <body>
     <section class="preview">
-       <div class="notebox">
-           This is an informational note.
-       </div>
-
-       <div class="notebox warning">
-           This note shows a warning.
-       </div>
+      <div class="notebox">
+          This is an informational note.
+      </div>
 
-       <div class="notebox danger">
-           This note shows danger!
-       </div>
+      <div class="notebox warning">
+          This note shows a warning.
+      </div>
 
+      <div class="notebox danger">
+          This note shows danger!
+      </div>
 
+      <div class="danger">
+          This won't get styled — it also needs to have the notebox class.
+      </div>
     </section>
 
     <textarea class="playable playable-css" style="height: 240px;">
 .notebox {
-    border: 4px solid #666;
-    padding: .5em;
+  border: 4px solid #666;
+  padding: .5em;
 }
 
 .notebox.warning {
-    border: 4px solid orange;
-    font-weight: bold;
+  border-color: orange;
+  font-weight: bold;
 }
 
 .notebox.danger {
-    border: 4px solid red;
-    font-weight: bold;
+  border-color: red;
+  font-weight: bold;
 }
     </textarea>
 
@@ -76,6 +78,10 @@
 <div class="notebox danger">
     This note shows danger!
 </div>
+
+<div class="danger">
+    This won't get styled — it also needs to have the notebox class
+</div>
     </textarea>
 
     <div class="playable-buttons">
@@ -84,4 +90,4 @@
 </body>
 <script src="../playable.js"></script>
 
-</html>
+</html>
