[CSS] 선택자

1. 하위선택자
div p  // div안에있는 p를 선택한다.[하위엔 안에있는 모든것이 포함된다.] (공백)
2. 자식선택자
div>p // div 바로아래에 있는 p만을 선택한다.
3. 형제선택자
h2+a // 같은 위치선상에 있는 형제노드 선택
<style>
        div{ width: 500px; padding: 20px; border: 3px solid #333; background: pink;}
        div>h2 { color: red;} // 선택자
        h2+a {color: red;} // 형제선택자
    </style>

    <h2>h2 입니다.</h2>
        <div id="box1">div 입니다.
            <ul>
                <li>
                    <h2>h2 입니다.</h2>
                </li>
                <li><h2>h2입니다.</h2></li>
        <li><a>a입니다.</a></li>
            </ul>
        </div>
        <div id="box2">div 입니다.
            <h2>h2입니다.</h2>
            <a>a입니다.</a>
        </div>

div h2 = 하위노드 h2를 모두 찾는다. div 안에있는 h2 모두 적용된다.
div>h2 = 자식노드인 box2의 h2만 적용된다.
h2+a = box2에있는 h2의 형제노드 a만선택

4. 연속선택자
div, a // 한번에 두개를 선택할 수 있다.
5. 모든태그 선택자
div * // div안에있는 모든 선택자
* { } // 브라우저에서 자동설정되는 margin 이나 padding를 제거할때 유용함
6. 가상 선택자(★)
a:link // 방문하지 않은 링크
a:visited // 방문 했던 링크
a:hover // 마우스가 올려진 링크 ★
a:active // 클릭하는 순간 링크
7. 가상 요소 선택자
:nth-child() // 자식노드의 순서를 입력해 선택할 수 있다. (자식노드중에 몇번째인지를 확인 태그를 구분하지 않음) even,odd 짝수 홀수
:frist-child // 첫번째 자식노드를 선택
:last-child // 마지막 자식노드를 선택
:only-child // 하나만 있는 자식을 선택
:nth-of-type() // 자식들 중에서 몇번째를 선택한다. first,last,only 모두 가능
:not() // class명이나 id명, onlu-child 등을 넣을 수 있고 != 아닐때를 뜻한다.
:empty // 자식노드가 없는 요소만을 선택
 <style>
        li:nth-child(2) {background-color: blue;} // 2번째 manu2가 선택됨
        h2:nth-child(4) {background-color: red;} // div안에 있는 4번째 h2가 선택됨(자식노드를 앞에 넣어야함)
        :nth-child(4) {background-color: red;} // h2제거시 4번째에 있는 menu4+ 4번째 h2가 선택됨
        p:nth-of-type(2) { color:red; } // p가있는곳에서 2번째 p(5번째 p) 가 선택됨
    </style>

  <ul>
            <li>manu1</li>
            <li>manu2</li>
            <li>manu3</li>
            <li>manu4</li>
        </ul>

        <div>
            <h2>1번째 h2</h2>
            <p>2번째 p</p>
            <div>3번째 div</div>
            <h2>4번째 h2</h2>
            <p>5번째 p</p>
        </div>

   td:nth-child(1) { border-left: none;}
               td:last-child { border-right: none;} ==  td:not(:last-child) { border-right: none;}
table에서 양쪽 border를 편하게 없앨 수 있다.

8. 속성선택자
[속성명] 
a[title] {color: red}
a[href^='http']href 속성이 http로 시작하는 요소 선택
a[herf$='html'] html로 끝나는 요소선택
input[type='text'] { } input타입이 text인것만 선택
a[href*='naver'] 중간에 naver이 들어간 요소를 선택
<div title="div"> div</div> a를 빼고 [title]입력시 둘다 선택됌

ex)
<a href="http://naver" title="바로가기1">바로가기1<a>
<a href="http://google" title="바로가기2">바로가기2<a>
<a href="sub.html">바로가기3<a>