04 - 가상선택자 ?

- 가상선택자 ?

  가상선택자란, 선택자에 추가하는 키워드를 의미합니다.

  선택자에 해당하는 태그가 특정 상대를 만족하고 있을 때 발생합니다.

 

html 태그를 작성해줍니다.

 

1) hover:{} 속성

 <div id="box1">가상 선택자 연습1</div>

    <ul class="menu">

        <li>리스트1</li>

        <li>리스트2</li>

        <li>리스트3</li>

    </ul>

css에 hover  속성을 부여해줍니다.

 #box1:hover { background-image:url(img/bgSquare.png);

                      height:200px; color:green; }

box1에 hover 속성을 부여해줍니다.

hover속성은 마우스를 올리고 있는 상태를 의미합니다.

내리면 속성이 부여되지않았던 상태로 돌아갑니다. 원래 적용시켜놓지 않았던 태그 속성값도

적용이 가능합니다.

 

 

2) :nth-child() 속성

  자식 태그들 중에서 원하는 순번에 해당하는 태그만 선택할 때 사용하는 가상선택자 입니다.

  html을 작성해줍시다.

 <div class="box2">

        <div class="box2_top">

            <h2>제목입니다.</h2>

        </div>

        <div class="box2_bot">

            <p>문단입니다1</p>

            <p>문단입니다2</p>

        </div>

    </div>

 .list {width:1000px; display:flex;

               justify-content:space-between; }

        .list div { width: 180px;  height:200px;

                    background-color:orange; }

        .list div:nth-child(2),.list div:nth-child(4)

            { background-color:pink; color:red; }

       

        .list div:nth-child(5):hover a { color:aquamarine; font-size:20px; }

        .list div:nth-child(5):hover {background-color:blue;}

css를 적용해줍시다.

해당 html 에 css를 적용하였을 때 나오는 화면을 확인해봅시다.

 

이렇게 순번에 해당하는 자식요소들만 background 색상이 바뀌었음을 확인할 수 있습니다.