css 선택자 조건2

1.일반 구조 선택자
      부모 안의 형제 관계중 선택자 선택하기
      ex)부모선택자 자식선택자:선택 위치{...}
        ㄱ)선택자 태그= 해당 부모안의 선택위치가 해당 선택자이면
        ㄴ)선택자 * = 해당 부모안의 모든 태그중
                :first-child 처음 태그
                :last-child 마지막 태그
                :nth- child(숫자[n])  위에서 부터 숫자[씩] 태그
                :nth-last-child(숫자[n]) 아래서부터 숫자[씩]태그

ex)부모의 id가 #1일때

    #1 p:first-child{} -> 부모의 id가 1인 태그 의 첫번째가 p태그일 경우만 변경. (만약 div라거나 다른거면 선택안됨)
    #1 p:last-child{} -> 부모의 id가 1인 태그 의 첫번째가 p태그일 경우만 변경. (만약 div라거나 다른거면 선택안됨)
    #1 p:nth-child(2){} -> 부모의 id가 1인태그의 2번째 태그가 p태그일 경우만 변경.
    #1 p:nth-child(3n){} -> 부모의 id가 1인태그의 위에서 3*n번째 태그가 p태그일 경우만 변경.
    #1 p:nth-lats-child(3n){} -> 부모의 id가 1인태그의 아래서 3*n번째 태그가 p태그일 경우만 변경.

cf)
     #1 *:first-child{} -> 부모의 id가 1인 태그 의 첫번째 변경. (만약 div라거나 다른거면 선택안됨)
     #1 *:last-child{} -> 부모의 id가 1인 태그의 마지막 변경. (만약 div라거나 다른거면 선택안됨)
     #1 *:nth-child(2){} -> 부모의 id가 1인태그의 2번째 변경.
     #1 *:nth-child(3n){} -> 부모의 id가 1인태그의 위에서 3*n번째  변경.
     #1 *:nth-lats-child(3n){} -> 부모의 id가 1인태그의 아래서 3*n번째 변경.

 ㄴ)부정 선택자 선택한 요소를 제외한 나머지를 선택하는 선택자
    부모선택자 자식선택자:not(:선택 위치){...}
     ex)#1 p:not(:nth-child(3n)) {} : 부모 아이디가 test4인 것의 p태그 중 위에서 3*n중 이 아닐경우

 

 

2.형태 구조 선택자

  특정 위치의 태그를 선택 할 때 사용한다.

  :first-of-type 처음으로 찾은 해당 태그 변경
  :last-of-type 제일아래에 있는 해당 태그 변경
  :nth-of-type(숫자[n])  전체 p태그중에서 위에서 부터 숫자[씩] 태그
  :nth-last-of-type(숫자[n]) 전체 p태그중에서 아래서부터 숫자[씩] 태그

 

 

3.문자 선택자

ex)부모선택자 선택자:값{}
값 : first-letter :첫번째 글자
      first-line : 첫번째 줄
      before : 선택자 앞 공간
      after : 선택자 뒤 공간
     :selection 드래그시 블록설정
     
 ㄴ) 같이 쓸만한 것들(공간 지정 필수)
counter-increment: rint; 태그별 자동 번호 매김
선택자 태그{
counter-increment: rint;
}   --> 선언 후에

같은 부모 선택자 선택자:before/after{

               contents : counter(rint);

            }  필요.

만약' . '넣고 싶으면  contents : counter(rint)"."; 를 하면 된다.

contants : 공간에 붙여 넣을것
선택자 선택자before/after{ contents : 값; }

1)  문단의 첫글자 선택하기

#test p:first-letter{ (test에 있는 p들의 첫글자 값) 
             font-size:3em; /*숫자는 픽셀, em은 대비값*/
        }

2)문단의 첫번째 줄 선택하기

#test p:first-line{ (test에 있는 p들의 첫줄 )
         background: grey;
       }

3)각 태그 별 자동 번호 매김(어디 붙일지 공간 선택 필수)
 #test3 p{ (test3에 있는 p들의 번호 선언) 
            counter-increment: rint ;
         }
 4)태그 앞 공간 선택하기
 #test p:before{ (test에 있는 p들의 앞쪽에 번호. 붙이기) 
          content:counter(rint)".";   -->숫자. qwer... 
          (." 은 숫자 뒤에 . 붙이는것. 없어도 된다.) 
      }
5.태그 뒤 공간 선택하기
 #test p:after{ (test에 있는 p들의 뒤에 - by lunebleue" 붙임) 
            content : "- by lunebleue";
            }

6.드래그한 글자 블록 색 변경
#test p::selection{ (test에 있는 p들의 글 드래그시 블록) 
     background: chocolate;
           color:skyblue;
       }