[코딩 공부_24] CSS Selector, 가상 셀렉터

1. 동적 셀렉터 : 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법

 

①  a:link  → 셀렉터가 방문하지 않은 링크일때

<style>
	a:link {color: black;}
</style>

    <h1>가상 셀렉터</h1>
    <div>
        <a href="http://www.naver.com">
            naver
        </a>
    </div>
    <hr>
    <a href="http://www.thehersheycompany.com">
        hershes
    </a>
    <hr>
    <a href="http://www.naver.com">
    yahoo

 

 

②  a:visited  → 셀렉터가 방문한 링크일 때 

 <style>
 	a:visited {color: skyblue;}
 </style>

    <h1>가상 셀렉터</h1>
    <div>
        <a href="http://www.naver.com">
            naver
        </a>
    </div>
    <hr>
    <a href="http://www.thehersheycompany.com">
        hershes
    </a>
    <hr>
    <a href="http://www.naver.com">
    yahoo

 

③  a:hover  → 셀렉터에 마우스가 올라와 있을 때

<style>
 	a:hover {
        background-color: #ddd;
</style>

    <h1>가상 셀렉터</h1>
    <div>
        <a href="http://www.naver.com">
            naver
        </a>
    </div>
    <hr>
    <a href="http://www.thehersheycompany.com">
        hershes
    </a>
    <hr>
    <a href="http://www.naver.com">
    yahoo

 

 

④  a:active  → 셀렉터가 클릭된 상태일 때 

<style>
	a:active, a:focus {background-color: tomato;}
</style>

    <h1>가상 셀렉터</h1>
    <div>
        <a href="http://www.naver.com">
            naver
        </a>
    </div>
    <hr>
    <a href="http://www.thehersheycompany.com">
        hershes
    </a>
    <hr>
    <a href="http://www.naver.com">
    yahoo

 

 

⑤  a:focus  → 셀렉터에 포커스가 들어와 있을 때(tab)

<style>
	a:focus {background-color: tomato;}
</style>

    <h1>가상 셀렉터</h1>
    <div>
        <a href="http://www.naver.com">
            naver
        </a>
    </div>
    <hr>
    <a href="http://www.thehersheycompany.com">
        hershes
    </a>
    <hr>
    <a href="http://www.naver.com">
    yahoo

 

 

2. 구조 가상 클래스 셀렉터 

①  :first-child  → 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택한다

<style>
	ul li:first-child {color: coral; font-size: 30px;}
</style>

    <h1>가상 셀렉터 nth-child</h1>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

 

 

②  :last-child  → 셀렉터에 해당하는 모든 요소 중 마지막 자식 요소를 선택한다

<style>
	ul li:last-child {color: green; font-size: 30px;}
</style>

    <h1>가상 셀렉터 nth-child</h1>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

 

 

③  :nth-child(n)  /  :nth-child(2n)  →셀렉터에 해당하는 모든 요소 중 n번째 자식인 요소를 선택한다

<style>
	ul li:nth-child(2) {color: skyblue;}
</style>

    <h1>가상 셀렉터 nth-child</h1>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

 

 

④  :nth-child(odd)  → (홀수) 셀렉터에 해당하는 모든 요소 중 홀수번째 자식인 요소 선택한다

<style>
	div p:nth-child(odd) {color: coral; font-weight: bold;}
</style>

    <h1>가상 셀렉터 nth-child</h1>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>

 

 

⑤  :nth-child(even)  → (짝수) 셀렉터에 해당하는 모든 요소 중 짝수번째 자식인 요소 선택한다

<style>
	div p:nth-child(even) {color: coral; font-weight: bold;}
</style>

    <h1>가상 셀렉터 nth-child</h1>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>