-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (125 loc) · 3.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<style>/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1, h2 {
color: #333;
}
section {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 20px;
background-color: #fff;
}
/* 1. Descendant Selector (styles all list items within the div "tree") */
.tree ul li {
color: green;
font-weight: bold;
}
/* 2. Child Selector (styles only direct children of "complex") */
.complex > p {
color: blue;
font-weight: bold;
}
/* 3. General Sibling Selector (styles all siblings of the h3 in "neighborhood") */
.neighborhood h3 ~ p {
color: purple;
font-style: italic;
}
/* 4. Adjacent Sibling Selector (styles the paragraph directly after h3) */
.alleyway h3 + p {
color: orange;
font-weight: bold;
}
/* 5. Pseudo Classes */
.playground a:hover {
color: red;
text-decoration: underline;
}
.playground button:active {
background-color: #333;
color: white;
}
/* 6. Pseudo Elements */
.newspaper p::first-line {
font-weight: bold;
color: darkblue;
}
.newspaper p::first-letter {
font-size: 2em;
color: darkred;
}
/* Extras */
a:visited {
color: darkgray;
}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS City Adventure - Selectors Lab</title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<h1>Welcome to CSS City</h1>
<p>This is an interactive tour of CSS selectors. Explore each section to see how selectors affect the elements in CSS City.</p>
<!-- Descendant Selector Section -->
<section class="park">
<h2>1. Descendant Selector - Family Park</h2>
<div class="tree">
<p>Tree (div) contains children</p>
<ul>
<li>First Child - Grandchild</li>
<li>Second Child - Grandchild</li>
<li><ul>
<li>Third Child - Grand-grand-child</li>
<li>Fourth Child - Grand-grand-child</li>
</ul></li>
</ul>
</div>
</section>
<!-- Child Selector Section -->
<section class="apartment">
<h2>2. Child Selector - Apartment Complex</h2>
<div class="complex">
<p>Direct child tenant</p>
<div>
<p>Nested child tenant</p>
</div>
</div>
</section>
<!-- General Sibling Selector Section -->
<section class="neighborhood">
<h2>3. General Sibling Selector - Neighbor Street</h2>
<h3>Starting Point (h3)</h3>
<p>Neighbor 1</p>
<p>Neighbor 2</p>
<p>Neighbor 3</p>
<div>
<p>Neighbor 4</p>
</div>
</section>
<!-- Adjacent Sibling Selector Section -->
<section class="alleyway">
<h2>4. Adjacent Sibling Selector - Direct Neighbors</h2>
<h3>Title (h3)</h3>
<p>Direct neighbor</p>
<p>Another neighbor</p>
</section>
<!-- Pseudo Classes Section -->
<section class="playground">
<h2>5. Interactive Playground - Pseudo Classes</h2>
<a href="#">Hover over me!</a>
<button>Click me!</button>
</section>
<!-- Pseudo Elements Section -->
<section class="newspaper">
<h2>6. CSS City Newspaper - Pseudo Elements</h2>
<p>This is the first paragraph in the article. It contains important information.</p>
<p>This is the second paragraph, continuing the story.</p>
</section>
</body>
</html>