셀렉터 조합

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>