추가 예제 업데이트 예정

CSS Selector

HTML문서 특정 부분을 선택할 수 있는 css 문법.

Rule set

CSS Selector로 HTML 문서 특정 부분을 정의한 구문

style Sheet

Role set의 집합

---

selector의 종류

• *(HTML전체 셀렉터)
• 태그(태그명)
• id(아이디명(#으로 시작 ))
• class(클래스명(.으로 시작))
• attribute(속성) // 조금 복잡하다.
• 복합
  후손(스페이스)/자식(>)/인접형제(+)/일반형제(~)
• 가상 클래스
  link
  visited
  hover
  active
  focus
• ui요소 상태
  enabled
  disabled
  checked
  indeterminate(ui요소가 결정되지 않은 상태)
• 구조 가상 클래스
  first-child(부모의 첫 번째 자식인 요소선택)
  처음에 조금 헷갈렸다.

  	.hi:first-child{
         color: red;
     }
    <div class="hi">
             hi
         </div> ===> x
    <div>
        <div class="hi">
             hi
        </div> ===> o

  처음에는 부모가 "hi"인줄 알았는데, 그게아닌 선택자의 부모요소에 첫 번째 자식이 "hi"이다
  last-child
  nth-child(n): 부모의 첫번째 자식요소부터 시작,
  즉,

.hi:nth-child(1) = .hi:first-child

랑 같다.**
nth-last-child(n)
first-of-type
last-of-type
nth-of-type(n)
nth-last-of-type(n)

• 부정(Negation Psuedo-Class)
• 정합성 체크
  input태그와 관련이 있음.
  required에 따른 속성(valid/invalid)

 input[type="text"]:invalid {
        background-color: red;
    } => text가 없을 때,
    input[type="text"]:valid {
        background-color: yellow;
    } =>  text가 있을 때,
 <input type="text" name="" id="required" required>

pattern에 따른 속성(중요한 부분)(2개의 콜론(::)을 사용)

• 가상 요소 셀렉터
  선택한 요소의 특정 부분
  first-letter
  first-line(블럭요소에서만 가능)
  after
  before
  selection