Selector

선택자(Selector)

선택자는 CSS에서 HTML 요소를 가리킬 때 사용합니다. 선택자를 활용하여 여러 요소 중 원하는 요소만 특정하여 CSS를 적용할 수 있습니다.

전체 선택자

’*’을 사용하며 모든 요소를 선택합니다.

태그 선택자

태그명에 해당하는 요소를 모두 선택합니다.

ID 선택자

요소 어트리뷰트의 id와 일치하는 요소를 선택합니다. id는 HTML 문서 내에서 유일한 값입니다.

클래스 선택자

요소 어트리뷰트의 class와 일치하는 요소를 선택합니다. class는 HTML 문서 내에서 중복될 수 있습니다.

어트리뷰트 선택자

• 선택자[어트리뷰트]: 선택자의 어트리뷰트가 일치하는 요소들을 선택합니다.

• 선택자[어트리뷰트=“값”]: 어트리뷰트의 값까지 일치하는 요소들을 선택합니다.

• 선택자[어트리뷰트~=“값”]: 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택합니다.

/* h1 요소 중에 title 어트리뷰트 값에 "first"를 단어로 포함하는 요소 */
h1[title~='first'] {
  color: red;
}

• 선택자[어트리뷰트|=“값”]: 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-”)으로 시작하는 요소를 선택합니다.

/* p 요소 중에 lang 어트리뷰트 값이 "en"과 일치하거나 "en-"로 시작하는 요소 */
p[lang|='en'] {
  color: red;
}

• 선택자[어트리뷰트^=“값”]: 지정된 어트리뷰트 값으로 시작하는 요소를 선택합니다.

/* a 요소 중에 href 어트리뷰트 값이 "https://"로 시작하는 요소 */
a[href^="https://"]{
  color: red;
}

• 선택자[어트리뷰트$=“값”]: 지정된 어트리뷰트 값으로 끝나는 요소를 선택합니다.

/* a 요소 중에 href 어트리뷰트 값이 ".html"로 끝나는 요소 */
a[href$='.html'] {
  color: red;
}

• 선택자[어트리뷰트*=“값”]: 지정된 어트리뷰트 값을 포함하는 요소를 선택합니다.

/* div 요소 중에서 class 어트리뷰트 값에 "test"를 포함하는 요소 */
div[class*='test'] {
  color: red;
}

/* div 요소 중에서 class 어트리뷰트 값에 "test"를 단어로 포함하는 요소 */
div[class~='test'] {
  background-color: yellow;
}

복합 선택자

후손 선택자

부모 선택자의 모든 요소 중 선택자와 일치하는 모든 요소를 선택합니다.

/* div 태그 내 p 태그 모두 선택 */
div p {
  color: blue;
}

자식 선택자

부모 셀렉터의 모든 자식 요소 중 선택자와 일치하는 요소를 선택합니다.

/* div 태그의 자식들 중에서만 선택 */
div > p {
  color: blue;
}

형제(동위) 선택자

형제(동위)관계에서 뒤에 위치하는 요소를 선택할 때 사용합니다.

• 인접 형제 선택자

/* p 요소의 형제 요소 중 p 요소 바로 뒤에 있는 ul 요소 선택 */
p + ul {
  color: blue;
}

• 일반 형제 선택자

/* p 요소의 형제 요소 중 p 요소 뒤에 위치하는 ul 요소를 모두 선택 */
p ~ ul {
  color: blue;
}

가상 클래스 선택자

요소의 특정 상태에 따라 스타일을 정의할 때 사용됩니다. 특정 상태의 예는 다음과 같습니다.

• 마우스가 올라와 있을 때(hover)

• 포커스가 들어와 있을 때(focus)

selector:psuedo-class {
  property: value;
}

링크 선택자

• :link - 선택자가 방문하지 않은 링크일 때

• :visited - 선택자가 방문한 링크일 때

동적 선택자

• :hover - 선택자가 마우스에 올라와 있을 때

• :active - 선택자가 클릭된 상태일 때

• :focus - 선택자가 포커스에 들어와 있을 때

UI 요소 상태 선택자

• :checked - 선택자가 체크 상태일 때

• :enabled - 선택자가 사용 가능한 상태일 때

• :disabled - 선택자가 사용 불가능한 상태일 때

구조 가상 클래스 선택자

n은 0부터 시작됩니다.

• :first-child - 선택자에 해당하는 모든 요소 중 첫 번째 자식 요소를 선택합니다.

• :last-child - 선택자에 해당하는 모든 요소 중 마지막 자식인 요소를 선택합니다.

• :nth-child(n) - 선택자에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택합니다. 0과 음수는 생략되고, 2n+1, 3n-2 등과 같이 수열을 생성하여 여러 요소에 적용할 수도 있습니다.

• :nth-last-child(n) - 선택자에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택합니다. 0과 음수는 생략되고, 2n+1, 3n-2 등과 같이 수열을 생성하여 여러 요소에 적용할 수도 있습니다.

• :first-of-type - 선택자에 해당하는 요소의 부모 요소의 자식 요소 중 첫 번째로 등장하는 요소를 선택합니다.

• :last-of-type - 선택자에 해당하는 요소의 부모 요소의 자식 요소 중 마지막에 등장하는 요소를 선택합니다.

• :nth-of-type(n) - 선택자에 해당하는 요소의 부모 요소의 자식 요소 중 앞에서 n번째에 등장하는 요소를 선택합니다. 이도 2n, 3n+2 등과 같이 수열을 생성하여 여러 요소에 적용할 수 있습니다.

• :nth-last-of-type(n) - 선택자에 해당하는 요소의 부모 요소의 자식 요소 중 뒤에서 n번째에 등장하는 요소를 선택합니다.

부정 선택자

• :not(선택자) - 선택자에 해당하지 않는 모든 요소를 선택합니다.

가상 요소 선택자

가상 요소는 요소의 특정 부분에 스타일을 적용하기 위해 사용됩니다. 특정 부분이란 예를 들어 다음과 같습니다.

• 요소 콘텐츠의 첫 글자 또는 첫 줄

• 요소 콘텐츠의 앞 또는 뒤

가상 요소에는 두 개의 콜론(::)을 사용합니다.

• ::first-letter - 콘텐츠의 첫 글자를 선택합니다.

• ::first-line - 콘텐츠의 첫 줄을 선택합니다. 블록 요소에만 적용됩니다.

• ::after - 콘텐츠의 뒤에 위치하는 공간을 선택합니다.

• ::before - 콘텐츠의 앞에 위치하는 공간을 선택합니다.

• ::selection - 드래그한 콘텐츠를 선택합니다. 일부 브라우저에선 동작하지 않습니다.

전반적인 선택자 연습 사이트

CSS Dinner - https://flukeout.github.io/

 

Uploaded by Notion2Tistory v1.1.0