CSS 선택자와 가상 클래스

❓ 연결 선택자

선택자와 선택자를 연결해 적용 대상을 한정하는 것 (combination selector)

🌟 하위 선택자

• 지정한 모든 하위 요소에 스타일 적용

  • 부모요소에 포함된 하위 요소 모두에 스타일을 적용되는 것으로 '자손 선택자'라고도 불린다.
  • 상위요소와 하위요소를 공백으로 구분하고 대괄호 안에 속성을 지정한다.

section p { color: blue; } /*section 요소 안에 있는 모든 p 요소의 글자 색을 파랑으로 지정*/

📝 자식 선택자

• 자식 요소에만 스타일 적용

  • 자식 요소에만 스타일을 적용하는 선택자로 두 요소 사이에 '>'를 표시하여 부모요소와 자식요소를 구분한다.
  • 하위 선택자는 손자 요소까지 적용되지만, 자식 선택자는 바로 아래 요소(자식 요소)에만 스타일이 적용된다.

section > p { color: blue; } /*section 바로 밑에 있는 p 요소의 글자 색을 파랑으로 지정*/

📝 인접 형제 선택자

• 가장 가까운 형제 요소에 스타일 적용

  • 같은 부모 요소를 가지는 요소들을 형제 관계라고 부르고 형제 관계인 요소들에서 먼저 나오는 요소를 '형 요소', 나중에 오는 요소를 '동생 요소라고 한다.
  • 문서 구조상 같은 부모를 가진 형제 요소 중 첫번째 동생 요소에만 스타일이 적용된다.
  • 선택자 정의 방식은 '요소1 + 요소2'로 표시한다.

h1 + p { text-decoration: underline; } /*h1 다음에 오는 p요소 중 첫번째 p요소에만 밑줄표시*/

🌟 형제 선택자

• 형제 요소에 스타일 적용

  • 인접 형제 선택자와 달리 모든 형제 요소에 스타일을 적용한다.
  • 선택자 정의 방식은 '요소1 ~ 요소2'로 표시한다.

h1 ~ p { text-decoration: underline; } /*h1 다음에 오는 모든 형제 p요소에 밑줄표시*/

그림 출처 : https://innks.github.io/2017/06/05/css/css-Selector-note/

❓ 속성 선택자

태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정하는 것
속성 값 조건에 따라 다양한 스타일을 지정할 수 있다.

📝 [속성] 선택자

• 지정한 속성에 스타일 적용

  • 지정한 속성을 가진 요소를 찾아 스타일을 적용한다.

a [href] { background : yellow; } /* a태그 중 href속성이 있는 요소를 찾아 배경색 지정 */

[속성 = 값] 선택자

• 특정 값을 갖는 속성에 스타일 적용

  • 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용한다.

a[target="_blank"] { padding : 30px } /*target속성 값이 _blank인 링크를 찾아 패딩을 30px줌*/

[속성 ~= 값] 선택자

• 여러 값 중 특정 값이 포함된 속성에 스타일 적용

  • [속성=값]선택자는 속성과 값이 정확히 일치하는 요소를 찾지만, [속성~=값]선택자는 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택한다.

[속성 |= 값] 선택자

• 특정 값이 포함된 속성에 스타일 적용

  • 값은 한단어로 일치해야한다.
  • [속성~=값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않지만, [속성|=값]은 속성 값이 지정한 값이거나 "값-"으로 시작하면 스타일을 적용한다.

[속성 ^= 값] 선택자

• 특정 값으로 시작하는 속성에 스타일 적용

[속성 $= 값] 선택자

• 특정 값으로 끝나는 속성에 스타일 적용

  • href에 링크된 파일의 확장자 아이콘을 표시할 때 유용하다.

[속성 *= 값] 선택자

• 값의 일부가 일치하는 속성에 스타일 적용

  • 어느 위치에든 해당 값이 포함되어 있으면 스타일을 적용한다.

❓ 가상 클래스와 가상 요소

선택자들로도 지정하기 어려운 대상을 지정할 때 클래스 이름 앞에 콜론(:)을 붙여 표시하는 가상 클래스와 콜론 두개(::)를 붙여 표시하는 가상 요소가 있다.

📝 사용자 동작에 반응하는 가상 클래스

1. :link 가상 클래스 선택자
방문 하지 않은 링크에 스타일 적용

2. :visited 가상 클래스 선택자
방문한 링크에 스타일 적용

3. :hover 가상 클래스 선택자
웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용

4. :active 가상 클래스 선택자
웹 요소를 활성화했을 때의 스타일 적용

5. :focus 가상 클래스 선택자
웹 요소에 초점에 맞추어졌을 때의 스타일 적용

• 1번부터 4번까지 모두 정의하면 :link > :visited > :hover > :active 순서대로 정의해야한다.

📝 UI 요소 상태에 따른 가상 클래스

UI 요소 상태에 따른 가상 클래스는 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용한다.

1. :enabled / :disabled 가상 클래스 선택자
요소를 사용할 수 있을 때와 없을 때의 스타일 지정
ex) 입력창과 읽기전용의 차이

2. :checked 가상 클래스 선택자
라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정

📝 구조 가상 클래스

웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용한다.

1. :root 가상 클래스 선택자
문서 전체에 적용

HTML문서에서는 루트 요소가 HTML이므로 HTML요소에 스타일이 적용된다.

2. :nth-child(n) / nth-last-child(n) 가상 클래스 선택자
자식 요소의 위치에 따라 스타일 적용

:nth-child(n)는 앞에서 n번째인 자식 요소에 스타일을 적용하고, nth-last-child(n)는 끝에서부터 n번째인 자식 요소에 스타일을 적용한다.
위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 갖고 있어야만 한다.
= 문서 구조로 표시했을 때 모두 같은 레벨의 요소여야 한다.

3. :nth-of-type(n) / nth-last-of-type(n) 가상 클래스 선택자
특정 태그 위치에 스타일 적용

:nth-of-type(n)는 앞에서부터 세어 n번째 요소이고, nth-last-of-type(n)는 끝에서부터 n번째 요소에 스타일을 적용한다.

4. :first-child / :last-child 가상 클래스 선택자
첫번째, 마지막 요소에 스타일 적용

5. :first-of-type / last-of-type 가상 클래스 선택자
형제 관계 요소의 위치에 따라 스타일 적용

6. :only-child / :only-of-type 가상 클래스 선택자
하나뿐인 자식 요소에 스타일 적용

그 외 가상 클래스

:target 가상 클래스 선택자
앵커 목적지에 스타일 적용

페이지 이동할 때 링크(link)를 이용하고 같은 문서안에서 다른위치로 이동할 땐 앵커(anchor)를 이용한다.
이때 :target선택자를 이용하면 앵커로 연결된 부분(앵커의 목적지가 되는 부분)의 스타일을 지정할 수 있다.

:not 가상 클래스 선택자
특정 요소가 아닐 때 스타일 적용

"괄호 안에 있는 요소를 제외한"

p:not(#ex) { color: blue; } /*#ex가 아닌 모든 p요소의 글자 색 지정*/

📝 가상 요소

::first-line 요소 / ::first-letter 요소
첫 번째 줄, 첫 번째 글자에 스타일 적용

:first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.

::before 요소 / ::after 요소
내용 앞뒤에 콘텐츠 추가

특정 요소의 내용 앞이나 뒤에 지정한 내용을 넣을 수 있다.
요소 앞뒤에 텍스트나 이미지 등 추가가 가능하다.
HTML 태그를 사용하지 않고 가상 요소로 스타일을 적용할 수 있다.