[HTML] CSS Selector

https://www.w3schools.com/cssref/css_selectors.asp

https://www.w3schools.com/cssref/trysel.asp

//--------------
Basic selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Universal selector : *  - 전체

Type selector : 노드 이름 - ex) input  = <input>

Class selector : 클래스 이름
.classname :  class="classname"

ID selector : 아이디 이름
#idname :   id="idname"

Grouping selectors : , 
- div, span 는 <span>  <div> 모두 적용

//------------
Attribute selector : 속성 선택
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

[attr~=value] : 빈칸으로 분리된 단어가 정확히 일치
[attr|=value] : -(하이픈) 으로 분리된 단어가 정확히 일치
[attr^=value] : 시작값이 일치
[attr$=value] : 끝나는 값이 일치
[attr*=value] : 포함 (와일드 카드)

[attr operator  i] = 대소문자 구문 안함
[attr operator  s] = 대소문자 구문 함
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors


//-------------
Combinators

Descendant combinator : 빈칸 , 자식(전체)
div span  : <div> 의 자식중 <span> 

Child combinator : > , 바로 아래 자식만


General sibling combinator : ~ , 다음에 오는 모든 이웃(같은 레벨)
p ~ span : <p> 다음에 오는 모든 이웃 <span>

Adjacent sibling combinator : + , 바로 다음에 오는 이웃 1개
p + span : <p> 바로 다음에 오는 이웃 <span> 1개
- 바로 다음에 <span> 이 오지 않으면 선택 없음


//---------------------------------
pseudo-elements
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
::after (:after)
a::after {  content: "→"; }
- 링크 뒤에  "→" 추가

::before (:before)
a::before {  content: "♥"; }
- 링크 앞에  "♥" 추가

::first-letter (:first-letter) - 첫번째 글자 선택

::first-line (:first-line) - 첫번째 라인 선택

::placeholder 
-  <input> or <textarea> 요소의 placeholder 속성값

::selection
- 선택된 요소(마우스 드래그 등)

//----------------
::backdrop 
dialog::backdrop {  background: rgba(255,0,0,.25); }
 - 전체화면 <dialog> 태그에서 사용, dialog.showModal() 사용시 적용

::cue :  VTT (Video Text Tracks) 시 사용
::cue-region

::marker 

::part() -  shadow DOM에서 사용
::slotted() -  shadow DOM에서 사용


//--------------
Index of standard pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

:active - 마우스 버튼 눌린 상태의 요소

:any-link 
:link
- href 속성을 가진 <a>, <area>, <link> 요소

:checked
- radio (<input type="radio">), checkbox (<input type="checkbox">), 
    option (<option> in a <select>) 요소에서 체크된 상태

:default
<input type="checkbox">, <input type="radio">, 요소에서 checked
<option> 에서 selected 
<form> 에서 첫번째 <button>

:defined - custom 요소 관련

:dir( ltr | rtl )
:dir(rtl) {  color: red; }
- right-to-left 방향의 문자열의 색을 red로 설정

:disabled - disabled 속성을 가진 요소
:enabled - disabled가 아닌 것, 기본

:empty - 자식인 없는 요소



:first-child
 - 첫번째 자식 요소
- https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
p:first-child {   background-color: black; }
 - 꼭 첫번째 자식이 <p> 라야 한다, 첫번째 자식이 다른 태그면 
             다음에 있는 <p>가 선택되지 않는다.

:first-of-type
 - 첫번째 자식 요소
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
p:first-of-type {   background-color: black; }
 - 첫번째 자식이 다른 태그라도 상관없이, 첫번째<p>가 선택된다


:focus - 커서 포커스 받은 요소
:focus-visible 
:focus-within - 부모 요소에 사용하여, 자식 요소에 포커스 된 경우 스타일 변경 기능
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

:hover - 커서가 올라감
:indeterminate - 체크 안된 <input>

:in-range - <input> min , max 속성값 안에 있는지 판단
:out-of-range

:invalid - <form> 과 <input> 의 validation 결과가 실패인 경우
:valid


:is() 
https://developer.mozilla.org/en-US/docs/Web/CSS/:is
:is(header, main, footer) p:hover {  color: red; }
은 아래와 같다
header p:hover, main p:hover, footer p:hover {   color: red;  }

:lang() - 언어에 따른 처리
https://developer.mozilla.org/en-US/docs/Web/CSS/:lang

:last-child - 마지막 자식 요소
:last-of-type - 같은 타입중 마지막 자식 요소
- :first-of-type 참조


:not() - 셀렉터가 아닌 것
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
p:not(.fancy) {  color: green; }


:nth-child() - 몇번째 자식
tr:nth-child(odd) or tr:nth-child(2n+1)  1, 3, 5, 
tr:nth-child(even) or tr:nth-child(2n) 2, 4, 6,

:nth-of-type() - 같은 종류중 몇번째 자식

:nth-last-child() - 몇번째 마지막 자식
:nth-last-of-type() - 같은 종류중 몇번째 마지막 자식

:only-child - 1개의 자식만 있는 경우
- :first-child:last-child or :nth-child(1):nth-last-child(1), 와 동일
:only-of-type

:optional
- <input>, <select>, or <textarea> 중  required 속성을 갖지 않은 것
:required -  required 속성값이 설정된 것

:placeholder-shown - 현재 보이는 placeholder
:read-only - 편집 불가능한 것
:read-write - 편집 가능한 것


:root - <html>

:scope - 실험적
https://developers.google.com/web/updates/2013/03/What-s-the-CSS-scope-pseudo-class-for

:target - 링크 주소에 해당하는 id 
https://developer.mozilla.org/en-US/docs/Web/CSS/:target
<a href="#p1">Jump to the first paragraph!</a>
<p id="p1">You can</p>

:visited - 방문한 링크


//----------
:first - @page 에서 사용
@page :first {  margin-left: 50%; }
- 프린트 할때 첫 페이지 설정

:left - 프린트시 왼쪽 페이지
@page :left {   margin: 2in 3in; }

:right


//-----
:fullscreen - 전체화면에서 설정

:host - shadow DOM 의 루트
:host() - shadow host of the shadow DOM
:host-context()