forked from learning-zone/css-basics
-
Notifications
You must be signed in to change notification settings - Fork 0
/
selector.html
120 lines (102 loc) · 2.69 KB
/
selector.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
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
</head>
<style>
/**
Simple selectors
* Type selector ( A )
* Class selector ( .A )
* ID selector ( #A )
* Universal selector ( * ns|* *|* )
* Attribute selector ( [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] )
Combinators
* Adjacent sibling combinator ( A + B )
* General sibling combinator ( A ~ B )
* Child combinator ( A > B )
* Descendant combinator ( A B )
**/
/** Universal Selectors **/
* {
padding: 5px;
margin: 5px;
}
/** Adjacent sibling combinator **/
div + p {
background-color: gold;
}
/** General sibling combinator **/
p ~ ul {
background: greenyellow;
list-style-type: none;
width: 200px;
border: 1px solid #555;
margin: 0px;
padding: 0px;
}
li {
border-bottom: 1px solid #555;
margin: 0px;
padding: 8px;
}
li:last-child {
border-bottom: none;
}
li:hover {
background-color:#4CAF50;
color: white;
}
/** Child combinator **/
.grid > .module {
background-color: yellow;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
/** Contextual Selector
Contextual selectors define styles that are only applied when certain tags are nested within other tags.
**/
.example_contextual p {
background: tan;
}
</style>
<body>
<!-- Adjacent sibling combinator -->
<div>
<h2>Adjacent sibling combinator example</h2>
<p>This is second text.</p>
</div>
<p>This is third text.</p>
<p>This is fourth text.</p><br/><br/>
<!-- General sibling combinator -->
<div><h2>General sibling combinator example</h2></div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p><b>The first paragraph.</b></p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h3>Another list</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> <br/><br/>
<!-- Child combinator -->
<section class="grid"> <h2> Child combinator example </h2>
<article class="module">One</article>
<article class="module">Two</article>
<article class="module">Three</article>
<article class="module">Four</article>
<article class="module">Five</article>
</section> <br/><br/>
<!-- Contextual Selector -->
<div class="example_contextual"><p>Contextual Selector Example </p></div>
</body>
</html>