IT/WEB

[CSS] 셀렉터 기초

어센트 2020. 10. 7. 22:30

The 30 CSS Selectors You Must Memorize

 

The 30 CSS Selectors You Must Memorize

Learn CSS: The Complete GuideWe've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.CSS SelectorsSo you...

code.tutsplus.com

css

body{
    background: orange;
}

li{
    border: 2px solid red
}

#special{
    background:white;
} 

.completed{
    text-decoration: line-through;
}

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo List</title>

    <link rel="stylesheet" href="todos.css" type="text/css">
  </head>
  <body>
    <h1>Todo List</h1>

    <ul>
      <li class="completed">
        <input type="checkbox" checked/>
        Walk Rusty
      </li>
      <li class="completed">
        <input type="checkbox" />
        Buy Groceries
      </li>
      <li id="special">
        <input type="checkbox" />
        Finish Recording CSS Videos
      </li>
    </ul>
  </body>
</html>

중요한 태그 8개

  1. 요소
  2. 클래스
  3. id
  4. *
  5. descendent(자손) 선택자
  6. 인접 선택자
  7. 속성 선택자
  8. n th 선택자
/* Element */
li{

}
/* class */
.hello{

}
/* id */
#name{

}

/* Star */
*{
    border : 1px solid lightblue    
}

/* Descendant Selector */

li a{
    color: red;
}

/* Adjacent Selector */
/* h4 바로 다음에 오는 ul태그들에 대해 지정함 */
h4 + ul{ 
    border: 4px solid red;
}

/* Attribute Selector */
/* 태그의 속성까지 접근 가능하도록한다 */
a[href="http://www.google.com"]{
    background: blue;
}

input[type="checkbox"]{
    background: blue;
}

/* nth of type */
/*어떤 선택자 내의 n번째 요소를 선택한다. */
/* ()내에 even을 넣을 경우 짝수번째만 선택가능 */
ul:nth-of-type(3){
    background: purple;
}

실행화면