Skip to content

Commit bf695bb

Browse files
dreadwitdastacc-IFAdreadwitdastacc-IFA
committed
Add complex CSS selectors demo, video card preview, and Window IDL interface
- Created Complex-Selectors-Demo.html to illustrate various CSS selectors and their specificity. - Added VideoCard-Preview.html showcasing a visual preview of video cards with hover effects. - Introduced a new CSS file VideoCard.css with examples of CSS specificity. - Added a new Window.idl file defining the Window interface and its attributes/methods. - Updated Host github.md for SSH configuration and cloning repository.
1 parent 7111de0 commit bf695bb

8 files changed

Lines changed: 2200 additions & 2 deletions

‎src/CSS-Cascade-Demo.html‎

Lines changed: 466 additions & 0 deletions
Large diffs are not rendered by default.

‎src/CSS-Specificity-Demo.html‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS Specificity Interactive Demo</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
background: linear-gradient(135deg, #0f172a 0%, #071133 100%);
17+
color: #fff;
18+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19+
padding: 40px 20px;
20+
}
21+
22+
.container {
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
}
26+
27+
h1 {
28+
font-size: 2.5rem;
29+
margin-bottom: 10px;
30+
text-align: center;
31+
}
32+
33+
.subtitle {
34+
text-align: center;
35+
color: #aaa;
36+
margin-bottom: 40px;
37+
font-size: 1.1rem;
38+
}
39+
40+
.demo-section {
41+
display: grid;
42+
grid-template-columns: 1fr 1fr;
43+
gap: 40px;
44+
margin-bottom: 60px;
45+
}
46+
47+
.demo-box {
48+
background: rgba(255, 255, 255, 0.05);
49+
border: 1px solid rgba(255, 255, 255, 0.1);
50+
border-radius: 12px;
51+
padding: 30px;
52+
backdrop-filter: blur(10px);
53+
}
54+
55+
.demo-box h2 {
56+
font-size: 1.3rem;
57+
margin-bottom: 20px;
58+
color: #4ade80;
59+
}
60+
61+
.selector-list {
62+
background: rgba(0, 0, 0, 0.3);
63+
border-left: 3px solid #4ade80;
64+
padding: 15px;
65+
margin-bottom: 20px;
66+
border-radius: 6px;
67+
font-family: 'Courier New', monospace;
68+
font-size: 0.95rem;
69+
}
70+
71+
.selector {
72+
margin-bottom: 10px;
73+
padding: 8px;
74+
background: rgba(255, 255, 255, 0.05);
75+
border-radius: 4px;
76+
}
77+
78+
.selector:last-child {
79+
margin-bottom: 0;
80+
}
81+
82+
.specificity {
83+
display: inline-block;
84+
background: #3b82f6;
85+
color: #fff;
86+
padding: 4px 8px;
87+
border-radius: 4px;
88+
font-size: 0.85rem;
89+
margin-left: 10px;
90+
font-weight: bold;
91+
}
92+
93+
.selector-name {
94+
color: #fbbf24;
95+
word-break: break-all;
96+
}
97+
98+
.winner {
99+
background: rgba(34, 197, 94, 0.2);
100+
border-left-color: #22c55e;
101+
}
102+
103+
.winner .specificity {
104+
background: #22c55e;
105+
}
106+
107+
.preview {
108+
background: rgba(0, 0, 0, 0.5);
109+
padding: 30px;
110+
border-radius: 8px;
111+
margin-top: 20px;
112+
}
113+
114+
.preview h1 {
115+
text-align: left;
116+
margin: 0;
117+
padding: 20px;
118+
border-radius: 6px;
119+
background: rgba(255, 255, 255, 0.1);
120+
transition: all 300ms ease;
121+
}
122+
123+
.preview [id="parent"] {
124+
display: block;
125+
}
126+
127+
.color-indicator {
128+
display: inline-block;
129+
width: 20px;
130+
height: 20px;
131+
border-radius: 3px;
132+
margin-right: 8px;
133+
vertical-align: middle;
134+
}
135+
136+
.rule-explanation {
137+
background: rgba(100, 150, 255, 0.1);
138+
border-left: 3px solid #6496ff;
139+
padding: 12px;
140+
margin-top: 15px;
141+
border-radius: 6px;
142+
font-size: 0.95rem;
143+
line-height: 1.6;
144+
}
145+
146+
.cascade-warning {
147+
background: rgba(249, 115, 22, 0.1);
148+
border-left: 3px solid #f97316;
149+
padding: 12px;
150+
margin-top: 15px;
151+
border-radius: 6px;
152+
font-size: 0.95rem;
153+
}
154+
155+
@media (max-width: 768px) {
156+
.demo-section {
157+
grid-template-columns: 1fr;
158+
}
159+
160+
h1 {
161+
font-size: 1.8rem;
162+
}
163+
}
164+
165+
/* Specificity Demo Styles */
166+
167+
/* Example 1: Basic element selector */
168+
.demo1 .target-h1 {
169+
color: red;
170+
}
171+
172+
/* Example 2: Element + Class */
173+
.demo2 .target-h1 {
174+
color: blue;
175+
}
176+
177+
.demo2 h1.has-class {
178+
color: blue;
179+
}
180+
181+
/* Example 3: ID selector WINS */
182+
.demo3 #parent-title {
183+
color: green;
184+
}
185+
186+
/* Example 4: Attribute selector */
187+
.demo4 [id="parent-title"] {
188+
color: yellow;
189+
}
190+
191+
/* Example 5: Multiple selectors cascade */
192+
.demo5 h1 {
193+
color: orange;
194+
}
195+
196+
.demo5 body h1 {
197+
color: purple;
198+
}
199+
200+
/* Example 6: :where() has zero specificity */
201+
.demo6 :where(#cannot-override) h1 {
202+
color: cyan;
203+
}
204+
205+
.demo6 h1.demo6-style {
206+
color: cyan;
207+
}
208+
209+
/* Example 7: Complex selector - ID + Class + Element */
210+
.demo7 #myElement input.myClass {
211+
color: #ff1493;
212+
}
213+
214+
/* Example 8: Attribute + Pseudo-class + Element */
215+
.demo8 input[type="password"]:required {
216+
color: #00ffff;
217+
}
218+
219+
/* Example 9: Multiple elements */
220+
.demo9 html body main input {
221+
color: #fbbf24;
222+
}
223+
224+
</head><body><div class="container"><h1>🎨 CSS Specificity Interactive Demo</h1><p class="subtitle">Understanding CSS Specificity with Real Examples</p>< !-- Example 1: Basic Element Selector --><div class="demo-section"><div class="demo-box demo1"><h2>Example 1: Element Selector</h2><div class="selector-list"><div class="selector"><span class="selector-name">h1</span><span class="specificity">0-0-1</span></div></div><div class="rule-explanation"><strong>Rule:</strong>Targets any &lt;
225+
h1&gt;
226+
element<br><strong>Specificity:</strong>One element selector=0-0-1 </div></div><div class="demo-box"><h2>Preview</h2><div class="preview demo1"><h1>Here is a title !</h1></div><div style="margin-top: 15px; color: #aaa; font-size: 0.9rem;"><span class="color-indicator" style="background-color: red;"></span>Color: <code>red</code></div></div></div>< !-- Example 2: Element+Class --><div class="demo-section"><div class="demo-box demo2"><h2>Example 2: Element+Class</h2><div class="selector-list"><div class="selector"><span class="selector-name">h1.has-class</span><span class="specificity">0-1-1</span></div></div><div class="rule-explanation"><strong>Rule:</strong>Targets &lt;
227+
h1&gt;
228+
with class "has-class" <br><strong>Specificity:</strong>1 class+1 element=0-1-1<br><strong>Result:</strong><strong>BEATS Example 1</strong>(0-0-1 < 0-1-1) </div></div><div class="demo-box"><h2>Preview</h2><div class="preview demo2"><h1 class="has-class">Here is a title !</h1></div><div style="margin-top: 15px; color: #aaa; font-size: 0.9rem;"><span class="color-indicator" style="background-color: blue;"></span>Color: <code>blue</code></div></div></div>< !-- Example 3: ID Selector --><div class="demo-section"><div class="demo-box demo3"><h2>Example 3: ID Selector - Winner !</h2><div class="selector-list"><div class="selector winner"><span class="selector-name">#parent-title</span><span class="specificity">1-0-0</span></div></div><div class="rule-explanation"><strong>Rule:</strong>Targets element with id="parent-title" <br><strong>Specificity:</strong>1 ID=1-0-0<br><strong>Result:</strong><strong>BEATS ALL PREVIOUS</strong>(1-0-0 is highest so far) </div></div><div class="demo-box"><h2>Preview</h2><div class="preview demo3"><h1 id="parent-title">Here is a title !</h1></div><div style="margin-top: 15px; color: #aaa; font-size: 0.9rem;"><span class="color-indicator" style="background-color: green;"></span>Color: <code>green</code></div></div></div>< !-- Example 4: Attribute Selector --><div class="demo-section"><div class="demo-box demo4"><h2>Example 4: Attribute Selector</h2><div class="selector-list"><div class="selector"><span class="selector-name">[id="parent-title"]</span><span class="specificity">0-1-0</span></div></div><div class="rule-explanation"><strong>Rule:</strong>Targets element with attribute id="parent-title" <br><strong>Specificity:</strong>1 attribute selector=0-1-0<br><strong>Result:</strong><strong>LOSES to Example 3</strong>(0-1-0 < 1-0-0) </div></div><div class="demo-box"><h2>Preview</h2><div class="preview demo4"><h1 id="parent-title">Here is a title !</h1></div><div style="margin-top: 15px; color: #aaa; font-size: 0.9rem;">Note: Example 3's green still wins (not shown as yellow)
229+
</div></div></div>< !-- Example 5: Cascade (Source Order) --><div class="demo-section"><div class="demo-box demo5"><h2>Example 5: Cascade - Source Order</h2><div class="selector-list"><div class="selector"><span class="selector-name">h1</span><span class="specificity">0-0-1</span></div><div class="selector winner"><span class="selector-name">body h1</span><span class="specificity">0-0-2</span></div></div><div class="rule-explanation"><strong>Rule:</strong>When specificity is different,
230+
higher wins<br><strong>Result:</strong><code>body h1</code>(0-0-2) <strong>BEATS</strong><code>h1</code>(0-0-1) </div><div class="cascade-warning"><strong>Cascade Principle:</strong>If specificity were equal,
231+
the one appearing <em>later</em>in the source would win ! </div></div><div class="demo-box"><h2>Preview</h2><div class="preview demo5"><body><h1>Here is a title !</h1></body></div><div style="margin-top: 15px; color: #aaa; font-size: 0.9rem;"><span class="color-indicator" style="background-color: purple;"></span>Color: <code>purple</code></div></div></div>< !-- Example 6: :where() Zero Specificity --><div class="demo-section"><div class="demo-box demo6"><h2>Example 6: :where() - Zero Specificity !</h2><div class="selector-list"><div class="selector"><span class="selector-name">:where(#cannot-override) h1</span><span class="specificity">0-0-1</span></div><div class="selector winner"><span class="selector-name">h1.demo6-style</span><span class="specificity">0-1-1</span></div></div><div class="rule-explanation"><strong>Rule:</strong> :where() always has 0 specificity,
232+
ignores arguments<br><strong>Specificity:</strong>0-0-0 (from :where)+0-0-1 (element)=0-0-1<br><strong>Result:</strong><code>h1.demo6-style</code>(0-1-1) <strong>BEATS :where()</strong></div></div><div class="demo-box"><h2>Preview</h2><div class="preview demo6"><h1 class="demo6-style">Here is a title !</h1></div><div style="margin-top: 15px; color: #aaa; font-size: 0.9rem;"><span class="color-indicator" style="background-color: cyan;"></span>Color: <code>cyan</code></div></div></div>< !-- Specificity Chart --><div class="demo-box" style="margin-top: 60px;"><h2>📊 Specificity Hierarchy</h2><table style="width: 100%; border-collapse: collapse; margin-top: 20px;"><thead><tr style="border-bottom: 2px solid rgba(255, 255, 255, 0.2);"><th style="text-align: left; padding: 12px; color: #4ade80;">Selector Type</th><th style="text-align: center; padding: 12px; color: #4ade80;">Specificity</th><th style="text-align: left; padding: 12px; color: #4ade80;">Example</th></tr></thead><tbody><tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);"><td style="padding: 12px;">Element Selector</td><td style="text-align: center; padding: 12px;"><code>0-0-1</code></td><td style="padding: 12px;"><code>h1</code></td></tr><tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);"><td style="padding: 12px;">Class Selector</td><td style="text-align: center; padding: 12px;"><code>0-1-0</code></td><td style="padding: 12px;"><code>.class-name</code></td></tr><tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);"><td style="padding: 12px;">ID Selector</td><td style="text-align: center; padding: 12px;"><code>1-0-0</code></td><td style="padding: 12px;"><code>#id-name</code></td></tr><tr style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);"><td style="padding: 12px;">Inline Style</td><td style="text-align: center; padding: 12px;"><code>Higher</code></td><td style="padding: 12px;"><code>style="color: red;" </code></td></tr><tr><td style="padding: 12px;"><code> !important</code></td><td style="text-align: center; padding: 12px;"><code>HIGHEST</code></td><td style="padding: 12px;"><code>color: red !important;
233+
</code></td></tr></tbody></table></div></div></body></html>

0 commit comments

Comments
 (0)