셀렉터 조합

10 months ago · e70bfff508
parent 3bdbe32e75
commit e70bfff508
1 changed files with 50 additions and 0 deletions
--- a/selector/4-2/default.html
+++ b/selector/4-2/default.html
@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <title>CSS Combination</title>
+    <style>
+        /* 모든 요소 */
+        div,
+        h1 {
+            color: orangered;
+        }
+
+        /* div 아래 모든 자식요소 h2 */
+        div h2 {
+            color: mediumblue;
+        }
+
+        /* div 아래 직접적인 자식요소 h1 */
+        div>h1 {
+            color: lightslategray;
+        }
+
+        /* div와 가장 인접한 형제요소 h1 */
+        div+h1 {
+            font-style: italic;
+        }
+
+        /* div의 모든 형제요소 h2 */
+        div~h2 {
+            margin-left: 50px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Welcome to MyTube</h1>
+    <div>
+        <h1>New</h1>
+        <h2>New Movie 1</h2>
+        <h2>New Movie 2</h2>
+        <span>
+            <h1>This Week</h1>
+        </span>
+    </div>
+    <h1>Best</h1>
+    <h2>New Movie 3</h2>
+    <h2>New Movie 4</h2>
+    <h3>New Movie 5</h3>
+</body>
+</html>