Skip to content

Commit 8c4f5f7

Browse files
rachelandrewrachelandrew
committed
converted examples
1 parent 7f3ba97 commit 8c4f5f7

File tree

6 files changed

+283
-0
lines changed

6 files changed

+283
-0
lines changed

‎learn/tasks/cascade/cascade-download.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>The Cascade Task</title>
7+
8+
<style>
9+
10+
body {
11+
background-color: #fff;
12+
color: #333;
13+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
14+
padding: 1em;
15+
margin: 0;
16+
}
17+
#outer div ul .nav a {
18+
background-color: blue;
19+
padding: 5px;
20+
display: inline-block;
21+
margin-bottom: 10px;
22+
}
23+
24+
div div li a {
25+
color: yellow;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
32+
<div id="outer" class="container">
33+
<div id="inner" class="container">
34+
<ul>
35+
<li class="nav">
36+
<a href="#">One</a>
37+
</li>
38+
<li class="nav">
39+
<a href="#">Two</a>
40+
</li>
41+
</ul>
42+
</div>
43+
</div>
44+
45+
</body>
46+
47+
</html>

‎learn/tasks/cascade/cascade.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>The Cascade Task</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
10+
</style>
11+
12+
<style class="editable">
13+
#outer div ul .nav a {
14+
background-color: blue;
15+
padding: 5px;
16+
display: inline-block;
17+
margin-bottom: 10px;
18+
}
19+
20+
div div li a {
21+
color: yellow;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<section class="preview">
28+
<div id="outer" class="container">
29+
<div id="inner" class="container">
30+
<ul>
31+
<li class="nav"><a href="#">One</a></li>
32+
<li class="nav"><a href="#">Two</a></li>
33+
</ul>
34+
</div>
35+
</div>
36+
</section>
37+
38+
<textarea class="playable playable-css" style="height: 250px;">
39+
#outer div ul .nav a {
40+
background-color: blue;
41+
padding: 5px;
42+
display: inline-block;
43+
margin-bottom: 10px;
44+
}
45+
46+
div div li a {
47+
color: yellow;
48+
}
49+
</textarea>
50+
51+
<textarea class="playable playable-html" style="height: 170px;">
52+
<div id="outer" class="container">
53+
<div id="inner" class="container">
54+
<ul>
55+
<li class="nav"><a href="#">One</a></li>
56+
<li class="nav"><a href="#">Two</a></li>
57+
</ul>
58+
</div>
59+
</div>
60+
</textarea>
61+
62+
<div class="playable-buttons">
63+
<input id="reset" type="button" value="Reset">
64+
</div>
65+
</body>
66+
<script src="../playable.js"></script>
67+
68+
</html>

‎learn/tasks/cascade/marking.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# The Cascade Task Marking Guide
2+
3+
One possible solution is as follows:
4+
5+
```
6+
#outer #inner a {
7+
background-color: initial;
8+
}
9+
```
10+
11+
There are two things the student needs to do in this task. First, you need to write a selector for the a element which is more specific than the selector used to turn the background blue. I have achieved this by using the id selector which has very high specificity.
12+
13+
Then they need to remember that there are special keyword values for all properties. In this case I am using inherit to set the background back to be the same as its parent element.

‎learn/tasks/selectors/attribute-links-download.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: attribute selectors</title>
7+
8+
<style>
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 1em;
14+
margin: 0;
15+
}
16+
17+
ul {
18+
list-style: none;
19+
margin: 0;
20+
padding: 0;
21+
}
22+
23+
li {
24+
margin: 0 0 0.5em;
25+
}
26+
27+
a {
28+
display: block;
29+
padding: 0.5em;
30+
}
31+
32+
a {
33+
border: 5px solid grey;
34+
}
35+
</style>
36+
</head>
37+
38+
<body>
39+
40+
<ul>
41+
<li>
42+
<a href="https://example.com">Link 1</a>
43+
</li>
44+
<li>
45+
<a href="http://example.com" title="Visit example.com">Link 2</a>
46+
</li>
47+
<li>
48+
<a href="/contact">Link 3</a>
49+
</li>
50+
<li>
51+
<a href="../contact/index.html">Link 4</a>
52+
</li>
53+
</ul>
54+
55+
</body>
56+
57+
</html>

‎learn/tasks/selectors/attribute-links.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Selectors: attribute selectors</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
ul {
10+
list-style: none;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
li {
16+
margin: 0 0 .5em 0;
17+
}
18+
19+
a {
20+
display: block;
21+
padding: .5em;
22+
}
23+
</style>
24+
25+
<style class="editable">
26+
a {
27+
border: 5px solid grey;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
35+
<ul>
36+
<li><a href="https://example.com">Link 1</a></li>
37+
<li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
38+
<li><a href="/contact">Link 3</a></li>
39+
<li><a href="../contact/index.html">Link 4</a></li>
40+
</ul>
41+
42+
</section>
43+
44+
<textarea class="playable playable-css" style="height: 100px;">
45+
a {
46+
border: 5px solid grey;
47+
}
48+
</textarea>
49+
50+
<textarea class="playable playable-html" style="height: 160px;">
51+
<ul>
52+
<li><a href="https://example.com">Link 1</a></li>
53+
<li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
54+
<li><a href="/contact">Link 3</a></li>
55+
<li><a href="../contact/index.html">Link 4</a></li>
56+
</ul>
57+
</textarea>
58+
59+
<div class="playable-buttons">
60+
<input id="reset" type="button" value="Reset">
61+
</div>
62+
</body>
63+
<script src="../playable.js"></script>
64+
65+
</html>

‎learn/tasks/selectors/marking.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,3 +90,36 @@ h2 + p {
9090
border-bottom: 1px solid #ccc;
9191
}
9292
```
93+
94+
## Task 5: attribute selectors
95+
96+
The student is asked to target the `<a>` element with a title attribute and make the border pink (`border-color: pink`).
97+
98+
To select elements with a title attribute we can add title inside the square brackets, which will select the second link, which is the only one with a title attribute.
99+
100+
```
101+
a[title] {
102+
border-color: pink;
103+
}
104+
```
105+
106+
Target the <a> element with an href attribute which contains the word contact anywhere in its value and make the border orange (border-color: orange).
107+
108+
There are two things we want to match here, the href value "/contact" and also "../contact". So we need to match the string "contact" anywhere in the value using *=. This will select the third and fourth links.
109+
110+
```
111+
a[href*="contact"] {
112+
border-color: orange;
113+
}
114+
```
115+
116+
Target the <a> element with an href value starting with https and give it a green border (border-color: green).
117+
118+
Here we can look for an href value which starts with "https" and so use ^=, this will only select the first link.
119+
120+
```
121+
a[href^="https"] {
122+
border-color: green;
123+
}
124+
```
125+

0 commit comments

Comments
 (0)