質問編集履歴
3
cssコードの不要な点を削除。実現したい点を追記。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
https://www.youtube.com/watch?v=-tg8BlCv7Uk&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=11
|
|
10
10
|
|
|
11
11
|
上記youtubeの内容を実現したいです。
|
|
12
|
+
|
|
13
|
+
具体的には、「リンクをエリアとして選択した際に黄色になる」状態にしたいです。
|
|
12
14
|
|
|
13
15
|
|
|
14
16
|
|
|
@@ -22,17 +24,13 @@
|
|
|
22
24
|
|
|
23
25
|
```lang-css
|
|
24
26
|
|
|
25
|
-
テキスト
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
27
|
body{
|
|
30
28
|
|
|
31
29
|
font:1.1em/1.5 sans-serif;
|
|
32
30
|
|
|
33
|
-
padding-top:20px;
|
|
31
|
+
padding-top:20px;
|
|
34
32
|
|
|
35
|
-
|
|
33
|
+
}
|
|
36
34
|
|
|
37
35
|
.main{
|
|
38
36
|
|
2
htmlのコードを追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,15 +20,17 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
+
```lang-css
|
|
24
|
+
|
|
25
|
+
テキスト
|
|
26
|
+
|
|
23
27
|
|
|
24
28
|
|
|
25
29
|
body{
|
|
26
30
|
|
|
27
31
|
font:1.1em/1.5 sans-serif;
|
|
28
32
|
|
|
29
|
-
padding-top:20px;
|
|
33
|
+
padding-top:20px;}
|
|
30
|
-
|
|
31
|
-
}
|
|
32
34
|
|
|
33
35
|
|
|
34
36
|
|
|
@@ -44,23 +46,17 @@
|
|
|
44
46
|
|
|
45
47
|
}
|
|
46
48
|
|
|
47
|
-
|
|
48
|
-
|
|
49
49
|
a:link{
|
|
50
50
|
|
|
51
51
|
color: crimson;
|
|
52
52
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
55
|
a:visited {
|
|
58
56
|
|
|
59
57
|
color: green;
|
|
60
58
|
|
|
61
59
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
60
|
|
|
65
61
|
a:hover{
|
|
66
62
|
|
|
@@ -70,15 +66,79 @@
|
|
|
70
66
|
|
|
71
67
|
}
|
|
72
68
|
|
|
73
|
-
|
|
74
|
-
|
|
75
69
|
:focus {
|
|
76
70
|
|
|
77
71
|
background-color: yellow;
|
|
78
72
|
|
|
79
73
|
}
|
|
80
74
|
|
|
75
|
+
```
|
|
81
76
|
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
```lang-html
|
|
80
|
+
|
|
81
|
+
<!doctype html>
|
|
82
|
+
|
|
83
|
+
<html>
|
|
84
|
+
|
|
85
|
+
<head>
|
|
86
|
+
|
|
87
|
+
<meta charset="utf-8">
|
|
88
|
+
|
|
89
|
+
<title>属性セレクタの練習</title>
|
|
90
|
+
|
|
91
|
+
<link rel="stylesheet" href="./style.css">
|
|
92
|
+
|
|
93
|
+
</head>
|
|
94
|
+
|
|
95
|
+
<body>
|
|
96
|
+
|
|
97
|
+
<div class="main">
|
|
98
|
+
|
|
99
|
+
<h1>Heading 1</h1>
|
|
100
|
+
|
|
101
|
+
<a href="#a">mainクラスの子要素のリンク</a>
|
|
102
|
+
|
|
103
|
+
<p>
|
|
104
|
+
|
|
105
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
|
106
|
+
|
|
107
|
+
</p>
|
|
108
|
+
|
|
109
|
+
<input type="text">
|
|
110
|
+
|
|
111
|
+
<h2>Heading 2</h2>
|
|
112
|
+
|
|
113
|
+
<p>
|
|
114
|
+
|
|
115
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt<a href="#b">mainクラスの子要素ではないリンク</a> ut laoreet dolore magna aliquam erat volutpat.
|
|
116
|
+
|
|
117
|
+
</p>
|
|
118
|
+
|
|
119
|
+
<a href="#a">mainクラスの子要素のリンク</a>
|
|
120
|
+
|
|
121
|
+
<h2>Headiing 2</h2>
|
|
122
|
+
|
|
123
|
+
<p>
|
|
124
|
+
|
|
125
|
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,<a href="#c">mainクラスの子要素ではないリンク</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
|
126
|
+
|
|
127
|
+
</p>
|
|
128
|
+
|
|
129
|
+
<p>
|
|
130
|
+
|
|
131
|
+
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
|
132
|
+
|
|
133
|
+
</p>
|
|
134
|
+
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
</body>
|
|
138
|
+
|
|
139
|
+
</html>
|
|
140
|
+
|
|
141
|
+
```
|
|
82
142
|
|
|
83
143
|
### 試したこと
|
|
84
144
|
|
1
コードを挿入しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
css 擬似
|
|
1
|
+
css 擬似クラスを反映したい
|
test
CHANGED
|
@@ -16,11 +16,69 @@
|
|
|
16
16
|
|
|
17
17
|
「mainクラスの子要素のリンク」および「mainクラスの子要素ではないリンク」に対する擬似要素が反映されません。
|
|
18
18
|
|
|
19
|
-
作成した
|
|
19
|
+
作成したcssファイルは画像の通りです。
|
|
20
20
|
|
|
21
|
-
|
|
22
21
|
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
body{
|
|
26
|
+
|
|
23
|
-
|
|
27
|
+
font:1.1em/1.5 sans-serif;
|
|
28
|
+
|
|
29
|
+
padding-top:20px;
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
.main{
|
|
36
|
+
|
|
37
|
+
border:1px solid;
|
|
38
|
+
|
|
39
|
+
margin: auto;
|
|
40
|
+
|
|
41
|
+
padding:10px 20px 20px;
|
|
42
|
+
|
|
43
|
+
width:760px;
|
|
44
|
+
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
a:link{
|
|
50
|
+
|
|
51
|
+
color: crimson;
|
|
52
|
+
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
a:visited {
|
|
58
|
+
|
|
59
|
+
color: green;
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
a:hover{
|
|
66
|
+
|
|
67
|
+
text-decoration: none;
|
|
68
|
+
|
|
69
|
+
background-color: lightgray;
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
:focus {
|
|
76
|
+
|
|
77
|
+
background-color: yellow;
|
|
78
|
+
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
|
|
24
82
|
|
|
25
83
|
### 試したこと
|
|
26
84
|
|