-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathcss-siblings-selector-demonstration.html
129 lines (129 loc) · 3.04 KB
/
css-siblings-selector-demonstration.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
<meta content="Life time, easy understanding CSS selectors" name="description">
<title>CSS Siblings Selector Demo</title>
<style>
* {
margin:0;
padding:0;
}
body {
font:normal 12px Arial,Sans-Serif;
background-color:white;
}
a {
text-decoration:none;
}
h2 {
font-size:16px;
margin:20px 0 0;
}
#page-wrap {
margin:30px;
}
#page-wrap:after {
content:".";
height:0;
display:block;
clear:both;
visibility:hidden;
}
.col {
width:48%;
}
.col.left {float:left}
.col.right {float:right}
article,
article div,
article ~ div,
article ~ div div {
display:block;
border:1px dotted black;
margin:10px;
padding:10px;
position:relative;
}
#result article {
border:2px solid #090;
margin:15px 0;
}
textarea {
width:100%;
height:300px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background-color:black;
border:2px solid #666;
padding:5px 10px;
font:normal bold 13px Consolas,"Courier New",Monospace;
color:yellow;
overflow:auto;
margin:15px 0;
}
.legend {
display:block;
position:absolute;
top:-9px;
left:10px;
background-color:white;
font:normal normal 11px/normal Tahoma,Verdana,Arial,Sans-Serif;
color:black;
padding:2px 5px;
}
@media screen and (max-width:750px) {
.col.left,
.col.right {
display:block;
float:none;
width:auto;
margin:0 0 15px;
}
}
</style>
</head>
<body spellcheck="false">
<div id="style"></div>
<div id="page-wrap">
<div class="col left" id="skeleton">
<h2>Kode CSS</h2><textarea id="css-text" onkeyup="makeCSS('css-text');">article div {
border: 4px solid red !important;
}</textarea><a href="//github.com/tovic">Taufik Nurrohman</a>
</div>
<div class="col right" id="result">
<h2>Tampilan</h2><article><span class="legend"><article></span>
<div class="wrap-1"><span class="legend"><div class="wrap-1"></span>
<div class="wrap-2"><span class="legend"><div class="wrap-2"></span>
<div class="wrap-3"><span class="legend"><div class="wrap-3"></span>
<div class="wrap-4"><span class="legend"><div class="wrap-4"></span></div>
</div>
</div>
</div>
<div><span class="legend"><div></span>
<div class="wrap-5"><span class="legend"><div class="wrap-5"></span></div>
</div>
</article>
<div><span class="legend"><div></span>
<div><span class="legend"><div></span></div>
</div>
<div><span class="legend"><div></span>
<div><span class="legend"><div></span>
<div><span class="legend"><div></span></div>
</div>
</div>
<div><span class="legend"><div></span></div>
</div>
</div>
<script>
function makeCSS(value) {
var cssText = document.getElementById(value).value;
cssText = cssText.replace(/>/g, ">");
var css = "<style>" + cssText + "</style>";
document.getElementById('style').innerHTML = css;
} makeCSS('css-text');
</script>
</body>
</html>