CSS 다양한 선택자

* = 전체

. = class

# = id

후손선택자 & 자손선택자

선택자A 선택자B = 후손선택자 (해당요소(A)의 하위요소에 있는 특정한 요소를 모두선택)
선택자A>선택자B = 자손선택자 (해당요소(A)의 바로 빝에 위치하는 특정한 요소를 선택)
동위선택자

선택자A+선택자B = 선택자A 바로 뒤에 위치하는 선택자 B를 선택
선택자A~선택자B = 선택자A 뒤에 위치하는 모든 선택자 B를 선택
반응선택자 : 사용자가 마우스를 이용해서 혹은 특정한 행동(반응)을 취했을때 CSS속성을 지정할 수 있는 선택자

태그:hover = 마우스를 올려놓으면 선택
태그:active = 마우스를 클릭하면 선택
태그:visited = 클릭하여 방문하였을때 선택
태그:link = 방문하지 않은 링크 적용
구조선택자 : 부모의 요소안에서 특정한 위치의 요소를 선택할 때 사용/ 후손,자손선택자와 함께 많이 사용

태그 : first-child{} :같은 부모아래에서 첫번째에 해당하는 요소 선택
태그 : last-child{} :            "                  마지막 요소 선택
태그 : nth-child(n) : 형제관계의 순번째에 위치하는 요소를 선택(1,2,3/ 2n+1{홀수}/2n{짝수)
태그 : nth-last-chile(n) : 뒤에서부터 순번째 선택
형태구조선택자 : 일반구조선택자와 비슷하지만 태그 형태를 구분

태그 : first-of-type = 부모박스 안에서 형제관계중 첫번째에 위치하는 태그를 선택 ex(h1:first~{css}라면 h1중 첫번째)
태그 : last-of-type = 설명생략
태그 : nth-of-type = 수열번째에 위치하는 태그를 선택
태그 : nth-last-of-type = 뒤에서부터 수열번째에 위치하는 태그선택
속성선택자 : 속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택 태그가 가지고 있는 특정한 문자열을 확인 

[속성이름] 선택자는 특정 속성을 가지고 있는 요소를 모두 선택합니다. ex)  [title] { background: black; color: yellow; }
[속성이름 = "속성값"]{} / [속성명 + 속성값
[속성이름~(=*) = "속성값"]{} / [속성명 + 특정문자 들어간 속성값]
[속성이름|(=^) = "속성값"]선택자 / [속성명+접두사로 시작하는 속성값]
[속성이름$ = "속성값"] 선택자 / [속성명+ 접미사로 끝나는 속성값] ex)img[src$="png"]{}
상태선택자 : 마우스의 반응에 따른 상태를 선택

ex) <input type ="text(checkbox)" />   input[type="text(checkbox)"]:checked + div{background-color aqua}

 └텍스트(체크박스)에 체크를하면 자손선택자인 div에 배경색이 바뀐다

: checked : 체크상태의 input태그에 선택
: focus : 초점이 맞춰진 input태그를 선택
: enabled : 사용 가능한 input 선택
: disabled : 사용 불가능한 input 선택 <input disabled = "disabled" />
시작문자선택자 

:: first-letter : 첫번째 글자를 선택합니다
:: first-line : 첫번째 줄을 선택합니다. ex) p::first-line{특정한 선택자의 첫번째라인을 선택}
가상요소선택자 : 선택될 요소의 앞 혹은 뒤쪽으로 가상의 요소를 넣어 표현

:: before : 특정요소의 앞에 삽입
:: after 특정요소의 뒤에 삽입 ex) h1::after{ content:'뒤쪽>';} <- h1태그 뒤에 뒤쪽이란 단어 추가
**(flukeout 내용 추가)

element:empy = element중 빈것들 선택

:(#fancy) = id = fancy인거 빼고 모든 element 선택

div:not(:first-child) = div에 fist-child빼고 다 선택

a[href] = href="anything" 선택 = 주소 상관없이 있다면 선택

[type] = 이하동문 => input[type] => input에 type이 명시된거 싹다 선택, input[type="button"]도 가능 설명생략

[attribute^="Value"] = value칸의 특정 단어로 시작하는 것들을 선택함. ex = [for^="Sa"], .toy[catefory^="Swim"]

└ [attribut$="Value"] = 끝단어 , [attribut*="Value"] =어디든지