표지 사진: Tirachard Kumtanom from Pexels

기초

선택자는 스타일이 적용될 DOM 요소를 선택하는 데 사용되는 패턴입니다. 사실, 그것들은 모든 CSS 규칙의 첫 번째 부분입니다.

예시:

h1{
  background-color: magenta;
}

h1은 위의 예에서 선택자입니다.

트리에서 특정 DOM 요소를 선택하는 데 사용되는 다양한 패턴 중에서 의사 요소와 의사 클래스(분명히!)는 일반적인 것과 크게 다른 종류 중 하나입니다. (참고: 유형, 클래스 및 ID 선택자, 속성 선택자, 속성 선택자는 다른 유형입니다).

의사 클래스

의사 클래스는 CSS3 사양에 따라 단일 콜론으로 식별됩니다. 의사 클래스는 특정 상태에 있는 요소를 선택하는 선택기입니다. 예를 들어 요소의 첫 글자나 줄의 속성을 변경하는 데 사용할 수 있습니다.

통사론:

element:name{
   //properties
}

예시:

li:first-child{
  color: red;
}

여기서 첫 번째 자식 선택자는 형제 중 첫 번째 자식인 li 요소를 선택합니다. 이 선택기는 더 많은 형제 요소가 추가되는 경우 Javascript를 통해 클래스를 추가/삭제하지 않고도 스타일 지정에 도움이 됩니다.

유사 클래스의 유형

사용자 작업 기반 의사 클래스
스타일은 사용자가 수행한 작업을 기반으로 합니다.
예: :hover - 사용자가 요소 위로 마우스를 가져갈 때 적용됩니다. :focus - 사용자가 입력 요소를 선택할 때 적용됩니다.

위치를 기반으로 하는 유사 클래스
스타일은 형제/부모와 관련된 DOM 트리의 요소 위치를 기반으로 합니다.
예: :first-child – 부모 내에서 첫 번째 요소를 선택합니다. :nth-child() – 제공된 간단한 대수식을 기반으로 요소를 선택합니다. 몇 가지 예는 :nth-child(2n) 모든 짝수 자식이 선택되고 :nth-child(2n+1) 모든 홀수 자식이 선택됩니다.

기타 유사 클래스:not() – :not()의 매개변수 내부에 있는 선택자와 일치하는 기존 일치 세트에서 요소를 제거합니다.:empty - 텍스트나 자식 요소가 없는 의사 클래스를 선택합니다.

의사 요소

의사 요소는 요소의 특정 부분에 스타일을 지정하는 데 사용됩니다. CSS3 사양에 따르면 이중 콜론(::)으로 식별됩니다. 예를 들어, 요소의 첫 글자나 줄의 속성을 변경하는 데 사용할 수 있습니다.

통사론:

element::name{
   //properties
}

예시:

p::first-line {
  color: #5e5e5e;
}

일반적으로 사용되는 의사 요소는 다음과 같습니다.::first-line 요소의 첫 번째 줄에 스타일을 지정합니다.::first-letter 요소의 첫 글자 스타일을 지정합니다.::before 요소 앞에 일부 콘텐츠를 삽입합니다.::after 요소 뒤에 일부 콘텐츠를 삽입합니다.::selection 사용자가 선택한 콘텐츠의 스타일을 지정합니다.

유사 요소의 다른 예

::file-selector-button , ::backdrop , ::cue , ::cue-region , ::grammar-error , ::part() , ::placeholder 등

메모:

단일 콜론 구문은 CSS2 및 CSS1에서 의사 클래스와 의사 요소 모두에 사용되었습니다.

더블 콜론은 CSS3의 의사 요소에 대한 단일 콜론 표기법을 대체했습니다. 이것은 의사 클래스와 의사 요소를 구별하기 위한 W3C의 시도였습니다.

이전 버전과의 호환성을 위해 단일 콜론 구문은 CSS2 및 CSS1 의사 요소에 대해 허용됩니다.