This commit is contained in:
Micah Godbolt
2019-03-03 17:51:31 -08:00
parent 2da055ff1d
commit 3acd7d22ec
24 changed files with 511 additions and 425 deletions

View File

@@ -0,0 +1,27 @@
h2 {
color: red;
}
h2 + div {
color: green;
}
.myList li {
border: 1px solid green;
}
.myClass {
background: green;
}
#myId {
background: yellow;
}
.myClass.otherClass {
color: white;
}
section > div:last-child {
border: 1px solid pink;
}

View File

@@ -0,0 +1,56 @@
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="html,result"
>
<pre data-lang="css">
/* 1. */
/* 2. */
/* 3. */
/* 4. */
/* 5. */
/* 6. */
/* Bonus */
</pre>
<pre data-lang="html">
&lt;section&gt;
&lt;h2&gt;1. Text Color: Red&lt;/h2&gt;
&lt;div&gt;2. Color Green (hint: Sibling Selector)&lt;/div&gt;
&lt;ul class=&quot;myList&quot;&gt;
&lt;li&gt;
3. Border Green
&lt;/li&gt;
&lt;/ul&gt;
&lt;main&gt;
&lt;div class=&quot;myClass&quot;&gt;4. Background Green&lt;/div&gt;
&lt;div class=&quot;myClass otherClass&quot;&gt;
5. Background Green &amp; Color White
(Hint Qualified Selector)
&lt;/div&gt;
&lt;div id=&quot;myId&quot; class=&quot;otherClass&quot;&gt;6. Background Yellow&lt;/div&gt;
&lt;/main&gt;
&lt;ul&gt;
&lt;li&gt;
Don't Style Me
&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;Bonus: Border Pink&lt;/div&gt;
&lt;/section&gt;
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>