Skip to content

Commit f4ab3ee

Browse files
rachelandrewrachelandrew
committed
adding some selectors examples
1 parent eca7e92 commit f4ab3ee

File tree

7 files changed

+458
-0
lines changed

7 files changed

+458
-0
lines changed

‎learn/selectors/class-many.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: class</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
.notebox {
10+
margin: 1em 0;
11+
}
12+
</style>
13+
14+
<style class="editable">
15+
.notebox {
16+
border: 4px solid #666;
17+
padding: .5em;
18+
}
19+
20+
.notebox.warning {
21+
border: 4px solid orange;
22+
font-weight: bold;
23+
}
24+
25+
.notebox.danger {
26+
border: 4px solid red;
27+
font-weight: bold;
28+
}
29+
30+
</style>
31+
</head>
32+
33+
<body>
34+
<section class="preview">
35+
<div class="notebox">
36+
This is an informational note.
37+
</div>
38+
39+
<div class="notebox warning">
40+
This note shows a warning.
41+
</div>
42+
43+
<div class="notebox danger">
44+
This note shows danger!
45+
</div>
46+
47+
48+
</section>
49+
50+
<textarea class="playable playable-css" style="height: 240px;">
51+
.notebox {
52+
border: 4px solid #666;
53+
padding: .5em;
54+
}
55+
56+
.notebox.warning {
57+
border: 4px solid orange;
58+
font-weight: bold;
59+
}
60+
61+
.notebox.danger {
62+
border: 4px solid red;
63+
font-weight: bold;
64+
}
65+
</textarea>
66+
67+
<textarea class="playable playable-html" style="height: 260px;">
68+
<div class="notebox">
69+
This is an informational note.
70+
</div>
71+
72+
<div class="notebox warning">
73+
This note shows a warning.
74+
</div>
75+
76+
<div class="notebox danger">
77+
This note shows danger!
78+
</div>
79+
</textarea>
80+
81+
<div class="playable-buttons">
82+
<input id="reset" type="button" value="Reset">
83+
</div>
84+
</body>
85+
<script src="../playable.js"></script>
86+
87+
</html>

‎learn/selectors/class-type.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: class</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
span.highlight {
14+
background-color: yellow;
15+
}
16+
17+
h1.highlight {
18+
background-color: pink;
19+
}
20+
21+
</style>
22+
</head>
23+
24+
<body>
25+
<section class="preview">
26+
<h1 class="highlight">Class selectors</h1>
27+
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
28+
melon azuki bean garlic.</p>
29+
30+
<p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
31+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
32+
</section>
33+
34+
<textarea class="playable playable-css" style="height: 140px;">
35+
span.highlight {
36+
background-color: yellow;
37+
}
38+
39+
h1.highlight {
40+
background-color: pink;
41+
}
42+
</textarea>
43+
44+
<textarea class="playable playable-html" style="height: 160px;">
45+
<h1 class="highlight">Class selectors</h1>
46+
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
47+
melon azuki bean garlic.</p>
48+
49+
<p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
50+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
51+
</textarea>
52+
53+
<div class="playable-buttons">
54+
<input id="reset" type="button" value="Reset">
55+
</div>
56+
</body>
57+
<script src="../playable.js"></script>
58+
59+
</html>

‎learn/selectors/class.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: type</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.highlight {
14+
background-color: yellow;
15+
}
16+
17+
</style>
18+
</head>
19+
20+
<body>
21+
<section class="preview">
22+
<h1 class="highlight">Class selectors</h1>
23+
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
24+
melon azuki bean garlic.</p>
25+
26+
<p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
27+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
28+
</section>
29+
30+
<textarea class="playable playable-css" style="height: 80px;">
31+
.highlight {
32+
background-color: yellow;
33+
}
34+
</textarea>
35+
36+
<textarea class="playable playable-html" style="height: 160px;">
37+
<h1 class="highlight">Class selectors</h1>
38+
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
39+
melon azuki bean garlic.</p>
40+
41+
<p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
42+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
43+
</textarea>
44+
45+
<div class="playable-buttons">
46+
<input id="reset" type="button" value="Reset">
47+
</div>
48+
</body>
49+
<script src="../playable.js"></script>
50+
51+
</html>

‎learn/selectors/id.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: id</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
#one {
14+
background-color: yellow;
15+
}
16+
17+
h1#heading {
18+
color: rebeccapurple;
19+
}
20+
21+
</style>
22+
</head>
23+
24+
<body>
25+
<section class="preview">
26+
<h1 id="heading">ID selector</h1>
27+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
28+
melon azuki bean garlic.</p>
29+
30+
<p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
31+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
32+
</section>
33+
34+
<textarea class="playable playable-css" style="height: 140px;">
35+
#one {
36+
background-color: yellow;
37+
}
38+
39+
h1#heading {
40+
color: rebeccapurple;
41+
}
42+
</textarea>
43+
44+
<textarea class="playable playable-html" style="height: 160px;">
45+
<h1 id="heading">ID selector</h1>
46+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
47+
melon azuki bean garlic.</p>
48+
49+
<p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
50+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
51+
</textarea>
52+
53+
<div class="playable-buttons">
54+
<input id="reset" type="button" value="Reset">
55+
</div>
56+
</body>
57+
<script src="../playable.js"></script>
58+
59+
</html>

‎learn/selectors/selector-list.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: type</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
span {
14+
background-color: yellow;
15+
}
16+
17+
strong {
18+
color: rebeccapurple;
19+
}
20+
21+
em {
22+
color: rebeccapurple;
23+
}
24+
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<h1>Type selectors</h1>
31+
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
32+
melon azuki bean garlic.</p>
33+
34+
<p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
35+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
36+
37+
<p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach avocado
38+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
39+
</p>
40+
</section>
41+
42+
<textarea class="playable playable-css" style="height: 200px;">
43+
span {
44+
background-color: yellow;
45+
}
46+
47+
strong {
48+
color: rebeccapurple;
49+
}
50+
51+
em {
52+
color: rebeccapurple;
53+
}
54+
</textarea>
55+
56+
<textarea class="playable playable-html" style="height: 260px;">
57+
<h1>Type selectors</h1>
58+
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
59+
melon azuki bean garlic.</p>
60+
61+
<p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
62+
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
63+
64+
<p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach avocado
65+
daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
66+
</p>
67+
</textarea>
68+
69+
<div class="playable-buttons">
70+
<input id="reset" type="button" value="Reset">
71+
</div>
72+
</body>
73+
<script src="../playable.js"></script>
74+
75+
</html>

0 commit comments

Comments
 (0)