css

특정위치 자식 요소 선택하기 first-child

제뉴어리맨 2022. 6. 4. 01:23

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        ul{
            list-style: none;
            width: 400px;
        }

        #ulist :first-child{     /* ulist란 id를 가진 요소 하위에 첫번째 자식이 되는 모든 요소에 적용 */
            border: 10px solid pink;
        }     

    </style>
    
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>우선순위 테스트</legend>

            <ul id="ulist">
                <li>  /* 적용됨 */
                    <label for="name"> 이름 </label>  /* 적용됨 */
                    <input class="nameclass" id="name" type="text">
                </li>
                <li>
                    <label for="phone"> 전화번호 </label>  /* 적용됨 */
                    <input id="phone" type="text">
                </li>
            </ul>
        </fieldset>
    </form>
</body>
</html>

 

결과 화면

 

코드에 달린 주석에서 설명하듯이

#ulist란 id를 가진 요소의 하위 요소중 첫번째 자식이 될 수 있는 모든 요소에 스타일이 적용됬다.

그렇다면 이름 라벨에만 스타일을 적용하고 싶다면?

 

 #ulist :first-child{     /* ulist란 id를 가진 요소 하위에 첫번째 자식이 되는 모든 요소에 적용 */
            border: 10px solid pink;
        }     

부분을 아래와 같이 바꿔주면 된다.

      #ulist li:first-child{
            border: 10px solid pink;
        }

 

결과화면

 

그렇다면 이름 input요소에만 스타일을 적용하고 싶다면?

위에서 수정한 스타일 부분을 아래와 같이 수정 해주면 된다.

 

   #ulist li:first-child input{
            border: 10px solid pink;
        }

 

결과화면