선택자 (selector)

beomjin_97·2022년 3월 26일
0

css

목록 보기
1/4

1. 기본 선택자

* {}            /*전체 선택자*/
div {}          /*태그 선택자*/
.checked {}     /*클래스 선택자*/
#basic {}       /*id 선택자*/
h1, h2, h3 {}   /*그룹 선택자*/


2. 연결 선택자

section h1 {}   /*하위 선택자*/
section > h1 {} /*자식 선택자*/
section + h1 {} /*인접 형제 선택자*/
section ~ h1 {} /*형제 선택자*/
  • 하위 선택자 : 상위요소에 포함된 모든 하위 요소를 선택한다.
  • 자식 선택자 : 부모 요소에 포함된 자식 요소만 선택한다.
  • 인접 형제 선택자 : section 이후 가장 먼저 오는 형제 요소 h1를 선택한다.
  • 형제 선택자 : section과 형제인 모든 h1를 선택한다.



3. 속성 선택자

[autofocus] {}        /*[속성]*/
[target = _blank] {}  /*[속성 = 값]*/
[class ~= button] {}  /*[속성 ~= 값]*/ 
[title |= us] {}      /*[속성 |= 값]*/ 
[title ^= eng] {}     /*[속성 ^= 값]*/ 
[href $= xls] {}      /*[속성 $= 값]*/ 
[href *= w3] {}       /*[속성 *= 값]*/ 
  • [속성] : 해당 속성이 있는 요소
  • [속성 = 값] : 지정한 속성값이 있는 요소를 선택한다.
  • [속성 ~= 값] : 지정한 속성값이 포함된 요소를 선택한다.
  • [속성 |= 값] : 지정한 속성값이 포함된 요소를 선택한다. (하이픈 포함)
  • [속성 ^= 값] : 지정한 속성값으로 시작하는 요소를 선택한다.
  • [속성 $= 값] : 지정한 속성값으로 끝나는 요소를 선택한다.
  • [속성 *= 값] : 지정한 속성값의 일부가 일치하는 요소를 선택한다.



4. 가상 클래스

  • :link : 방문하지 않은 링크에 스타일을 적용한다.
  • :visited : 방문했던 링크에 스타일을 적용합니다.
  • :hover : 지정한 요소에 마우스 포인터가 hover될 때 스타일을 적용한다.
  • :active : 지정한 요소가 활성화 되었을 때 스타일을 적용한다.
  • :focus : 지정한 요소에 초점이 맞춰졌을 때 스타일을 적용한다.
  • :target : 앵커 대상에 스타일을 적용한다.
  • :enabled : 지정한 요소를 사용할 수 있는 상태 일 때 스타일을 적용한다.
  • :disabled : 지정한 요소를 사용할 수 없는 상태 일 때 스타일을 적용한다.
  • :checked : 선택한 요소의 스타일을 적용한다.
  • :not : 지정한 요소가 아닐 때 선택해서 스타일을 적용한다.



5. 구조 가상 클래스

  • :only-child : 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
  • A:only-type-of : 부모 안에 A요소가 하나뿐일 때 선택한다.
  • :firt-child : 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
  • :last-child : 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
  • A:first-of-type : 부모 안에 있는 A요소 중에서 첫 번째 요소를 선택한다.
  • A:last-of-type : 부모 안에 있는 A요소 중에서 마지막 요소를 선택한다.
  • :nth-child(n) : 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
  • :nth-last-child(n) : 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
  • A:nth-of-type(n) : 부모 안에 있는 A요소 중에서 n번째 요소를 선택한다.
  • A:nth-last-of-type(n) : 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택한다.



6. 가상 요소

  • ::first-line : 첫번째 줄을 선택한다.
  • ::first-letter : 줄에서 첫번째 글자를 선택한다.
  • ::before : 특정 요소의 앞에 내용이나 스타일을 추가한다.
  • ::after : 특정 요소의 뒤에 내용이나 스타일을 추가한다.
profile
Rather be dead than cool.

0개의 댓글