Notice
Recent Posts
Recent Comments
Link
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

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

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;
        }

 

결과화면

'css' 카테고리의 다른 글

div 영역 안에 div를 가로로 나열하여 배치하고 가운데 정렬하기  (0) 2022.06.04
[CSS] display - block과 inline 그리고 inline-block  (0) 2022.06.04
perspective 주의점.  (0) 2022.05.14
여러가지 연산자 (>), (추후 업데이트)  (0) 2022.05.14
다양한 선택자 ( + , ~, first-child, only-child, last-child, nth-child(a))  (0) 2022.05.14
'css' Related Articles more