CSS

nth-child, nth-of-type

은선은 2022. 5. 30. 11:57

nth-child : 부모 엘리먼트의 모든 자식 엘리먼트중 n번째

nth-of-type:  부모 엘리먼트의 특정 자식 엘리먼트중 n번째

 

html

<body>
    <div>
       <ul>
           <p>1-1</p>
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ul> 
       <ul>
           <p>1-2</p>
           <li>4</li>
           <li>5</li>
           <li>6</li>
       </ul> 
    </div>
</body>

css

div li:nth-child(2){color: red;}/* p까지 생각해서 2로! */
div li:nth-of-type(1){border: 1px solid blue;} /* li만 생각해서 1로! */