css 선택자 간단 정리본

서론

CSS 선택자 한번 정리해야 겠다는 의미로 기록을 남겨둡니다.

reference

• https://www.w3schools.com/cssref/css_selectors.asp
• https://ssungkang.tistory.com/entry/css-css-...
• https://www.nextree.co.kr/p8468/

본론

css 를 작성할 때 쓰는 css syntax 에서 Selector 자리에 오는 표기에 대해서
Rule set = (선택자 선언블록{선언(속성: 속성값)})

일반적인 선택자 4가지

1. * 전체 선택자
2. tag 태그 선택자
   3.. .(dot) 클래스 선택자
3. #(sharp) ID 선택자

복합선택자, 선택자 사이에 오는 기호에 대해서, 6가지

1. (연결) .a-class.b-class
   • element 가 class 속성에 두개를 모두 가지는 경우에만 적용
2. ,(콤마) h1, h2
   • 모든 h1 과 h2 에 적용
3. (스페이스바) .a-class .b-class
   • 하위( 또는 자손, descendant) 선택자, 직계가 아니더라도 서브트리에 속하면 적용
4. >(꺽쇠, ) ul > li
   • 자식 선택자, 직계 자손일 경우에만 적용 (바로 아래의 자식)
5. +(plus) div + p
   • 인접 형제 선택자, div 바로 다음(immediately afer)에 오는 p 에 대해서
6. ~(Tilde) p ~ ul
   • 일반 형제 선택자, ul 앞에 선행(preceded)하는 p 에 대해서

attribute 선택과 관련해서

[title~="flower"] a[href^=https]

1. [attribute]
   • 해당 속성이 있는 태그
2. [attribute=value]
   • 해당 속성값이 value 인 태그
3. [attribute~=value]
   • 속성값에 value를 포함하는 경우
4. [attribute|=value]
   • 속성값이 value 로 시작하는 경우
5. [attribute^=value]
   • 속성값이 value 로 시작하는 경우
6. [attribute$=value]
   • 속성값이 value 로 끝나는 경우 a[href$=.pdf]
7. [attribute*=value]
   • 속성값이 value 를 포함하는 경우

(4css2:5css3, 3css2:7css3 은 의미가 비슷하다, 5~7은 css3 에서 추가되었다.)

가상 클래스 선택자 (Pseudo-Classes)

(링크 선택자: The link pseudo-classes)
(동적 선택자: The user action pseudo-classes)
(구조 선택자: Structural pseudo-classes)

a:active input[type="text"]:enabled

1. a
   active hover link visited
2. input
   focus
enabled disabled
required optional
in-range out-of-range min, max (attr) 과 같이 쓸 때
   default indeterminate checked radio, checkbox 등에서
   invaild valid pattern (attr) 과 같이 쓸 때
   read-only read-write
3. tag
   empty
first-child last-child
first-of-type last-of-type
fullscreen lang(language) not(tag)
nth-child(n) nth-last-child(n) nth-last-of-type(n)
only-child only-of-type
4. 기타
   root target

CSS Pseudo-elements

::first-line
::first-letter
::before
::after
::marker
::selection