Skip to content

Commit 00b8802

Browse files
rachelandrewrachelandrew
committed
The rest of the selectors example files for Learn
1 parent 60101e5 commit 00b8802

14 files changed

+721
-1
lines changed

‎learn/selectors/adjacent.html

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

‎learn/selectors/attribute-case.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: case-insensitivity</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
li[class^=a] {
14+
background-color: yellow;
15+
}
16+
17+
li[class^=a i] {
18+
color: red;
19+
}
20+
21+
</style>
22+
</head>
23+
24+
<body>
25+
<section class="preview">
26+
<h1>Case-insensitivity</h1>
27+
<ul>
28+
<li class="a">Item 1</li>
29+
<li class="A">Item 2</li>
30+
<li class="Ab">Item 3</li>
31+
</ul>
32+
33+
</section>
34+
35+
<textarea class="playable playable-css" style="height: 200px;">
36+
li[class^=a] {
37+
background-color: yellow;
38+
}
39+
40+
li[class^=a i] {
41+
color: red;
42+
}
43+
</textarea>
44+
45+
<textarea class="playable playable-html" style="height: 160px;">
46+
<h1>Case-insensitivity</h1>
47+
<ul>
48+
<li class="a">Item 1</li>
49+
<li class="A">Item 2</li>
50+
<li class="Ab">Item 3</li>
51+
</ul>
52+
</textarea>
53+
54+
<div class="playable-buttons">
55+
<input id="reset" type="button" value="Reset">
56+
</div>
57+
</body>
58+
<script src="../playable.js"></script>
59+
60+
</html>

‎learn/selectors/attribute-substring.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: substring matching selectors</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
li[class^=a] {
14+
font-size: 200%;
15+
}
16+
17+
li[class$=a] {
18+
background-color: yellow;
19+
}
20+
21+
li[class*=a] {
22+
color: red;
23+
}
24+
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<h1>Attribute substring matching selectors</h1>
31+
<ul>
32+
<li class="a">Item 1</li>
33+
<li class="ab">Item 2</li>
34+
<li class="bca">Item 3</li>
35+
<li class="bcabc">Item 4</li>
36+
</ul>
37+
38+
</section>
39+
40+
<textarea class="playable playable-css" style="height: 200px;">
41+
li[class^=a] {
42+
font-size: 200%;
43+
}
44+
45+
li[class$=a] {
46+
background-color: yellow;
47+
}
48+
49+
li[class*=a] {
50+
color: red;
51+
}
52+
</textarea>
53+
54+
<textarea class="playable playable-html" style="height: 160px;">
55+
<h1>Attribute substring matching selectors</h1>
56+
<ul>
57+
<li class="a">Item 1</li>
58+
<li class="ab">Item 2</li>
59+
<li class="bca">Item 3</li>
60+
<li class="bcabc">Item 4</li>
61+
</ul>
62+
</textarea>
63+
64+
<div class="playable-buttons">
65+
<input id="reset" type="button" value="Reset">
66+
</div>
67+
</body>
68+
<script src="../playable.js"></script>
69+
70+
</html>

‎learn/selectors/attribute.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: attribute presence and value selectors</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
li[class] {
14+
font-size: 200%;
15+
}
16+
17+
li[class=a] {
18+
background-color: yellow;
19+
}
20+
21+
li[class~=a] {
22+
color: red;
23+
}
24+
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<h1>Attribute presence and value selectors</h1>
31+
<ul>
32+
<li>Item 1</li>
33+
<li class="a">Item 2</li>
34+
<li class="a b">Item 3</li>
35+
<li class="ab">Item 4</li>
36+
</ul>
37+
38+
</section>
39+
40+
<textarea class="playable playable-css" style="height: 200px;">
41+
li[class] {
42+
font-size: 200%;
43+
}
44+
45+
li[class=a] {
46+
background-color: yellow;
47+
}
48+
49+
li[class~=a] {
50+
color: red;
51+
}
52+
</textarea>
53+
54+
<textarea class="playable playable-html" style="height: 160px;">
55+
<h1>Attribute presence and value selectors</h1>
56+
<ul>
57+
<li>Item 1</li>
58+
<li class="a">Item 2</li>
59+
<li class="a b">Item 3</li>
60+
<li class="ab">Item 4</li>
61+
</ul>
62+
</textarea>
63+
64+
<div class="playable-buttons">
65+
<input id="reset" type="button" value="Reset">
66+
</div>
67+
</body>
68+
<script src="../playable.js"></script>
69+
70+
</html>

‎learn/selectors/before-styled.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: ::before</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.box::before {
14+
content: "";
15+
display: block;
16+
width: 100px;
17+
height: 100px;
18+
background-color: rebeccapurple;
19+
border: 1px solid black;
20+
}
21+
22+
</style>
23+
</head>
24+
25+
<body>
26+
<section class="preview">
27+
<p class="box">Content in the box in my HTML page.</p>
28+
</section>
29+
30+
<textarea class="playable playable-css" style="height: 160px;">
31+
.box::before {
32+
content: "";
33+
display: block;
34+
width: 100px;
35+
height: 100px;
36+
background-color: rebeccapurple;
37+
border: 1px solid black;
38+
}
39+
</textarea>
40+
41+
<textarea class="playable playable-html" style="height: 60px;">
42+
<p class="box">Content in the box in my HTML page.</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/before.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: ::before</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
.box::before {
14+
content: "This should show before the other content."
15+
}
16+
17+
</style>
18+
</head>
19+
20+
<body>
21+
<section class="preview">
22+
<p class="box">Content in the box in my HTML page.</p>
23+
</section>
24+
25+
<textarea class="playable playable-css" style="height: 80px;">
26+
.box::before {
27+
content: "This should show before the other content."
28+
}
29+
</textarea>
30+
31+
<textarea class="playable playable-html" style="height: 60px;">
32+
<p class="box">Content in the box in my HTML page.</p>
33+
</textarea>
34+
35+
<div class="playable-buttons">
36+
<input id="reset" type="button" value="Reset">
37+
</div>
38+
</body>
39+
<script src="../playable.js"></script>
40+
41+
</html>

0 commit comments

Comments
 (0)