Skip to content

Commit 17fa40f

Browse files
rachelandrewrachelandrew
committed
selectors tasks
1 parent 2dd1b55 commit 17fa40f

File tree

9 files changed

+573
-0
lines changed

9 files changed

+573
-0
lines changed

‎learn/tasks/selectors/class-id-download.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Selectors: Class and ID Selectors</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
* {
16+
box-sizing: border-box;
17+
}
18+
</style>
19+
20+
</head>
21+
22+
<body>
23+
24+
<div class="container">
25+
<h1>This is a heading</h1>
26+
<p>Veggies es
27+
<span class="alert">bonus vobis</span>, proinde vos postulo
28+
<span class="alert stop">essum magis</span>
29+
kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
30+
<h2 id="special">A level 2 heading</h2>
31+
<p>Gumbo beet greens corn soko endive gumbo gourd.</p>
32+
<h2>Another level 2 heading</h2>
33+
<p>
34+
<span class="alert go">Parsley shallot</span>
35+
courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
36+
37+
</body>
38+
</html>

‎learn/tasks/selectors/class-id.html‎

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

‎learn/tasks/selectors/combinators-download.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+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Selectors: Combinators</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
* {
16+
box-sizing: border-box;
17+
}
18+
h2 {
19+
margin: 0;
20+
}
21+
</style>
22+
23+
<style class="editable"></style>
24+
</head>
25+
26+
<body>
27+
28+
<div class="container">
29+
<h2>This is a heading</h2>
30+
<p>This paragraph comes after the heading.</p>
31+
<p>This is the second paragraph.</p>
32+
33+
<h2>Another heading</h2>
34+
<p>This paragraph comes after the heading.</p>
35+
36+
<ul class="list">
37+
<li>One</li>
38+
<li>Two
39+
<ul>
40+
<li>2.1</li>
41+
<li>2.2</li>
42+
</ul>
43+
</li>
44+
<li>Three</li>
45+
</ul>
46+
47+
</div>
48+
49+
</body>
50+
51+
</html>

‎learn/tasks/selectors/combinators.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Selectors: Combinators</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
h2 {
12+
margin: 0;
13+
}
14+
</style>
15+
16+
<style class="editable">
17+
18+
19+
</style>
20+
</head>
21+
22+
<body>
23+
<section class="preview">
24+
<div class="container">
25+
<h2>This is a heading</h2>
26+
<p>This paragraph comes after the heading.</p>
27+
<p>This is the second paragraph.</p>
28+
29+
<h2>Another heading</h2>
30+
<p>This paragraph comes after the heading.</p>
31+
32+
<ul class="list">
33+
<li>One</li>
34+
<li>Two
35+
<ul>
36+
<li>2.1</li>
37+
<li>2.2</li>
38+
</ul>
39+
</li>
40+
<li>Three</li>
41+
</ul>
42+
43+
</div>
44+
45+
</section>
46+
47+
<textarea class="playable playable-css" style="height: 120px;">
48+
49+
</textarea>
50+
51+
<textarea class="playable playable-html" style="height: 130px;">
52+
<div class="container">
53+
<h2>This is a heading</h2>
54+
<p>This paragraph comes after the heading.</p>
55+
<p>This is the second paragraph.</p>
56+
57+
<h2>Another heading</h2>
58+
<p>This paragraph comes after the heading.</p>
59+
60+
<ul class="list">
61+
<li>One</li>
62+
<li>Two
63+
<ul>
64+
<li>2.1</li>
65+
<li>2.2</li>
66+
</ul>
67+
</li>
68+
<li>Three</li>
69+
</ul>
70+
71+
</div>
72+
</textarea>
73+
74+
<div class="playable-buttons">
75+
<input id="reset" type="button" value="Reset" />
76+
</div>
77+
</body>
78+
<script src="../playable.js"></script>
79+
</html>

‎learn/tasks/selectors/marking.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Selectors Marking Guide
2+
3+
This marking guide is for the tasks on the Selectors pages and subpages in the CSS Building Blocks section of Learn.
4+
5+
## Task 1: Type selectors
6+
7+
The student needs to target the h1, h2 and span selectors to change their color or size.
8+
9+
```
10+
h1 {
11+
color: blue;
12+
}
13+
14+
h2 {
15+
background-color: blue;
16+
color: white;
17+
}
18+
19+
span {
20+
font-size: 200%;
21+
}
22+
```
23+
24+
## Task 2: class and id selectors
25+
26+
This tests that the student understands he different between these and also how to target multiple classes on an item.
27+
28+
```
29+
#special {
30+
background-color: yellow;
31+
}
32+
33+
.alert {
34+
border: 2px solid grey;
35+
}
36+
37+
.alert.stop {
38+
background-color: red;
39+
}
40+
41+
.alert.go {
42+
background-color: green;
43+
}
44+
```
45+
46+
## Task 3: Pseudo-classes and pseudo-elements
47+
48+
Here we ask the student to apply a pseudo-class (:first-child) and pseudo-element (::first-line) to a piece of content.
49+
50+
We also ask them to style the `:link`, `:visited`, and `:hover` states of the `a` element, and the created striped table rows using the `:nth-child` pseudo-class.
51+
52+
```
53+
.container p:first-child {
54+
font-size: 150%;
55+
}
56+
57+
.container p:first-child::first-line {
58+
color: red;
59+
}
60+
61+
a:link {
62+
color: orange;
63+
}
64+
65+
a:visited {
66+
color: green;
67+
}
68+
69+
a:hover {
70+
text-decoration: none;
71+
}
72+
73+
tr:nth-child(even) {
74+
background-color: #333;
75+
color: #fff;
76+
}
77+
```
78+
79+
## Task 4: Combinators
80+
81+
This task checks that the student understands how to use the different combinators. They are asked to make paragraphs that dirctly follow an `h2` red, and to remove the list bullets and add a bottom border only for the direct children of the ul with a class of `.list`.
82+
83+
```
84+
h2 + p {
85+
color: red;
86+
}
87+
88+
.list > li {
89+
list-style: none;
90+
border-bottom: 1px solid #ccc;
91+
}
92+
```

‎learn/tasks/selectors/pseudo-download.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Selectors: Pseudo-class and Pseudo-element Selectors</title>
6+
<link rel="stylesheet" href="../styles.css"/>
7+
<style>
8+
body {
9+
background-color: #fff;
10+
color: #333;
11+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
12+
padding: 1em;
13+
margin: 0;
14+
}
15+
* {
16+
box-sizing: border-box;
17+
}
18+
19+
table {
20+
border-collapse: collapse;
21+
width: 300px;
22+
}
23+
24+
td,
25+
th {
26+
padding: 0.2em;
27+
text-align: left;
28+
}
29+
</style>
30+
31+
</head>
32+
33+
<body>
34+
35+
<div class="container">
36+
<p>Veggies es
37+
<a href="http://example.com">bonus vobis</a>, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
38+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
39+
<table>
40+
<tr>
41+
<th>Fruits</th>
42+
<th>Vegetables</th>
43+
</tr>
44+
<tr>
45+
<td>Apple</td>
46+
<td>Potato</td>
47+
</tr>
48+
<tr>
49+
<td>Orange</td>
50+
<td>Carrot</td>
51+
</tr>
52+
<tr>
53+
<td>Tomato</td>
54+
<td>Parsnip</td>
55+
</tr>
56+
<tr>
57+
<td>Kiwi</td>
58+
<td>Onion</td>
59+
</tr>
60+
<tr>
61+
<td>Banana</td>
62+
<td>Beet</td>
63+
</tr>
64+
</table>
65+
</div>
66+
67+
</body>
68+
69+
</html>

0 commit comments

Comments
 (0)