$$config title: [CSS] CSS selector(선택자) 간단설명 keywords: - CSS SELECTOR $$ # CSS selector(선택자) 간단설명 [css diner](https://flukeout.github.io/) [참고사이트](https://velog.io/@jaedie/CSS-Diner-%EC%99%84%EB%A3%8C%EB%8B%B5%EC%95%88%EC%9A%94%EC%A0%90%EC%A0%95%EB%A6%AC-23) *클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택*
1. A -> 테크명만 입력하면 선택
2. A -> 위와 동일
3. #id -> 테크 아이디명을 선택하기 위해 "#+아이디명"을 한다.
4. A B -> A테크 안에 있는 B테크 내용을 전부 선택한다.
5. #id A -> #에 해당하는 아이디안에 있는 A를 선택한다.
6. .classname -> 아이디와 다르게 클래스를 선택할때는 " . + 클래스명"을 한다.
7. A.className -> A테크 중 입력된 클래스를 선택
8. A, B -> A와 B선택(AND)
9. ```css *``` -> 전체 선택(ALL)
10. A * -> A테크 안에 있는 것을 전체 선택
11. A + B -> 특정 element 뒤에 *바로 따라오는 siblings들을 선택*할 수 있는 selector
12. A ~ B -> A라는 element 이후로 *존재하는 sibling 모두를 선택*하는 selector
13. A > B -> parents element에 속해 있는 child element를 바로 선택
---------[참고:코드펜](https://codepen.io/SeonHo-/pen/RwQBYvv)--------- 14. A:first-child -> parent element에 있는 첫번째 child element를 선택 (A는 직접적으로 우리가 선택하고자는 element가 되는것이지, parents element 아니다.)
15. :only-child ▷ parents element에 있는 child elements들 중 독자(only child)인 녀석들만 선택 ▷ A:only-child : only child 인 [모든 A element를 선택] ▷ A :only-child : "A"와 ":" 사이에 공백 有, A라는 parents elements들의 [모든 only-child element를 선택]
16. :last-child -> parents element의 child element 중 마지막 element (last child) ▷ child element가 하나라면 해당 element는 first-child 이자 only-child 이며 last-child임
17. :nth-child(A) -> n번째에 위치한 element 선택
18. :nth-last-child(A) -> :nth-child()와 비슷하지만 카운팅 방향이 위에서 부터가 아니라 아래에서 부터임
19. :first-of-type -> element, class, id 중 원하는 type의 첫번째 녀석을 선택
20. :nth-of-type(A) -> nth 자리에 위치한 type별로 선택 / 숫자외에도 패턴을 나타내는 "even or odd" 사용
---------[참고:코드펜](https://codepen.io/SeonHo-/pen/WNMKgmQ)--------- 21. :nth-of-type(An+B) ▷ 어느 한 element의 위치를 시작으로 n번째 element를 연속적으로 선택 ▷ B : selecting을 시작하는 element ▷ An : B이후로 A번째 element 모두를 연속적으로 선택
22. :only-of-type -> parent element내에서 '유일한'type을 선택
23. :last-of-type -> 한 type내에서 가장 마지막에 위치한 element를 선택
24. :empty -> child element가 하나도 없는 텅빈 element 모두를 선택
25. :not(X) ▷ 'x'를 제외한 모든 나머지 element를 선택 ▷ 괄호안에 1가지 이상의 type이 존재할때는 ','로 나눠줘야 한다.
26. [attribute] -> attribute(특성)을 이용한 selector
27. A[attribute] -> 어떠한 element type을 특정화하여 그 type내에서 한 특성을 공유하는 element들을 모두 선택
28. [attribute="value"] -> 특성이 가진 고유 값를 이용한 선택
29. [attribute^="value"] -> value의 일부분을 이용해 값의 *"앞부분"*을 공통적으로 공유하는 모든 element를 선택
30. [attribute$="value"] -> 앞쪽 일부 대신 뒷쪽의 일부를 가지고 선택
31. [attribute*="value"] -> 특정 알파벳을 특성값으로 가지는 모든 element 선택 ------------------------- # [용어설명] 1 . element : 여는테크, 닫는테그를 이용해 하나의 테그로 완성된 공간(?) 2 . siblings : A element 뒤에 바로 따라오는 B element를 A element의 sibling 이라고 한다. (단, 두 element는 같은 level 과 depth를 가지고 있어야 한다.)

게시글 상세