-
Notifications
You must be signed in to change notification settings - Fork 83
/
Copy path07_target.html
80 lines (72 loc) · 2.15 KB
/
07_target.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
<!DOCTYPE HTML>
<html>
<head>
<style>
head, style {display: block;}
[contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
html, body {margin: 0;}
style:first-of-type {visibility:hidden;}
style:last-of-type {padding: 5px 20px; font-size: 1.25em; white-space: pre; font-family: monospace; background-color: #eee;}
.block {
width: 300px;
min-height: 250px;
position: relative;
margin: 20px auto;
}
.section { display: inline; }
a {
text-decoration: none;
color: black;
float: left;
padding: 5px 10px;
border: 1px solid #ccc;
border-bottom: none;
margin-right: 10px;
}
div:not(:target) > a {
background-color: #eee;
}
div:target > a {
background-color: white;
}
.section > div {
background: white;
z-index: -2;
left: 0;
top: 30px;
bottom: 0;
right: 0;
padding: 20px;
border: 1px solid #ccc; }
.section:not(:target) > div { position: absolute }
.section:target > div { position: absolute; z-index: -1; }
</style>
<style contenteditable>div:not(:target) > a {
border-bottom: 0;
background-color: #eee;
}
div:target > a {
background-color: white;
}
.section:not(:target) > div { z-index: -2; }
.section:target > div { z-index: -1; }
</style>
<title>CSS Selector Test</title>
</head>
<body>
<div class="block">
<div id="tab1" class="section">
<a href="#tab1">Tab 1</a>
<div>Bacon ipsum dolor sit amet flank shank filet mignon prosciutto, frankfurter pork shankle tail short ribs pork belly short loin sirloin. Pig shank prosciutto tail short ribs, boudin spare ribs t-bone capicola bresaola.</div>
</div>
<div id="tab2" class="section">
<a href="#tab2">Tab 2</a>
<div>Beef chuck cow beef ribs kielbasa, venison hamburger ribeye biltong t-bone prosciutto strip steak boudin turducken flank.</div>
</div>
<div id="tab3" class="section">
<a href="#tab3">Tab 3</a>
<div>Jerky swine meatloaf, venison spare ribs boudin hamburger leberkase short ribs ball tip shoulder.</div>
</div>
</div>
</body>
</html>