3. CSS 선택자

※ 반드시 기억해야 하는 CSS 선택자 30개

1) 선택자

• 선택자는 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만을 선택할 수 있도록 도와준다.

(1) 요소 선택자

• 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 한다.

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }

• 요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어간다.
• 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.

그룹화 ,

h1, h2, h3 { color: yellow; }

• 선택자는 쉼표를 이용해서 그룹화를 할 수 있다.

전체 선택자 *

* { color: yellow; }

• *(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있다.
• 매우 편리하지만 성능에 좋지 않으므로 될 수 있으면 사용하지 말자.

(2) class 선택자

• 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것이다.
• 다만 html을 조금 수정해야 한다.

.genie { font-size: 30px; }

<p class="genie"> ... </p>

• 위 코드처럼 p의 class 속성의 값으로 "genie"라는 값을 넣었다면,
  CSS에서 그 값("genie")을 선택자로 지정하면 됩니다.
• 클래스 선택자를 쓸 때는, 맨 앞에 .(마침표) 를 찍어주어야 한다.
• 이제 어느 요소든지 class 속성값이 "genie"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 된다.

다중 클래스

• 공백으로 구분하여 여러 개의 class 값을 넣을 수 있다.

.genie { font-size: 30px; }
.star { color: blue; }

<p class="genie star"> ... </p>

(3) id 선택자

• class 선택자와 비슷한데, .(마침표) 대신 #(해시) 기호를 써준다.
• 요소에는 class 속성 대신 id 속성을 써준다.

#bar { background-color: yellow; }

<p id="blog"> ... </p>

• 이 p는 id 선택자의 스타일 규칙이 적용된다.

class 선택자와의 차이점

1. .기호가 아닌 #기호 사용
2. 태그의 class 속성이 아닌 id 속성을 참조
3. 👉🏻문서 내에 유일한 요소에 사용
4. 구체성

• 가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다 는 점이다.
• id 선택자로 규칙을 적용할 수 있는 요소는 only 1

선택자의 조합

/* 요소와 class의 조합 */
p.genie { ... }
/* <p>이면서 class 속성에 genie가 있어야 */

/* 다중 class */
.star.genie { ... }
/* class 속성에 star와 genie가 모두 있어야 */

/* id와 class의 조합 */
#blog.genie { ... }
/* id가 blog이며 class가 genie인 요소 */

(4) 속성 선택자

① 단순 속성으로 선택

p[class] { color: silver; } 
/* <p>이면서 class 속성이 있는 요소이면 적용됨 */

p[class][id] { text-decoration: underline; }
/* <p>이면서 class 속성과 id 속성이 둘다 있어야 적용됨 */

<p class="genie">Hello</p>
<p class="star">CSS</p>
<p class="coding" id="blog">HTML</p>

Hello, CSS, HTML은 은색 글자로 나오고, HTML은 밑줄도 쳐짐.

② 정확한 속성값으로 선택

• 속성의 값으로 요소를 선택한다.
• 선택자는 대괄호 안에 속성 이름과 속성값을 다 적는다.

p[class="genie"] { color: silver; }
p[id="blog"] { text-decoration: underline; }

③ 부분 속성값으로 선택

• 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다르다.

  <p class="color hot">red</p>
  <p class="cool color">blue</p>
  <p class="colorful nature">rainbow</p>

p[class~="color"] { font-style: italic; }
/* class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택 */

p[class^="color"] { font-style: italic; }
/* class 속성의 값이 "bar"로 시작하는 요소 선택 */

p[class$="color"] { font-style: italic; }
/* class 속성의 값이 "bar"로 끝나는 요소 선택 */

p[class*="color"] { font-style: italic; }
/* class 속성의 값이 "bar" 문자가 포함되는 요소 선택 */

다음 코드의 결과가 왜 이렇게 나왔을지 생각해보자❗

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

2) 문서 구조 관련 선택자

• 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부른다.

(1) 부모와 자식

div > h1 { color: red; }

• 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다.
• 공백이 있든 없든 상관없다.

(2) 조상과 자손

div span { color: red; }

• 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분한다.

(3) 형제

div + p { color: red; }

• 인접 형제 선택자는 선택자 사이에 + 기호를 넣는다.
• 공백이 있든 없든 상관없다.

위 코드처럼 문서 구조 관련 선택자는 더 복잡하게 사용할 수 있고
아무리 많이 나열되어 있더라도 제일 우측에 있는 요소가 실제 선택되는 요소라는 것이다!

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */

body > div table + ul { ... }

그렇다면 굳이 왜 쓰는걸까...?

3) 가상 선택자

• 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자이다.
• class 선택자와는 조금 다르지만, 마치 클래스 선택자처럼 동작하기에 가상 클래스 선택자라고 부른다.
• 어떻게 다른지 살펴보자.

그 전에 가상 클래스부터 공부하깅!

(1) 가상 클래스(pseudo class)

• 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스 이다.

• 우리가 직접 요소에 클래스를 선언하는 것이 아니라, 약속된 상황이 되면 브라우저 스스로 클래스를 적용한다.

• 특히나 가상 클래스가 HTML과 CSS에서 좋은 이유는 이들이 정적인 언어이기 때문이다.

• CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 하고 있다.

:pseudo-class {
    property: value;
}

• 가상 클래스는 :(콜론) 을 써서 나타낸다.

① 문서 구조와 관련된 가상 클래스

• :first-child : 첫 번째 자식 요소 선택
• :last-child : 마지막 자식 요소 선택

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

li:first-child { color: red; }
li:last-child { color: blue; }

첫 번째 li와 마지막 li에 가상 클래스가 적용된다.

• 실제 li에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 마치 아래의 코드와 같이 동작하는 것이다.

  <ul>
      <li class="first-child">HTML</li>
      <li>CSS</li>
      <li class="last-child">JS</li>
  </ul>

② 앵커 요소와 관련된 가상 클래스

• :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
• :visited : 이미 방문한 하이퍼링크를 의미

a:link { color: blue; }
a:visited { color: gray; }

• 하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미한다.

③ 사용자 동작과 관련된 가상 클래스

• 이 클래스들도 a에 주로 많이 쓰인다.

• :focus : 현재 입력 초점을 가진 요소에 적용
• :hover : 마우스 포인터가 있는 요소에 적용
• :active : 사용자 입력으로 활성화된 요소에 적용

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

(2) 가상 요소(pseudo element)

• 가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다.
• 가상 요소 : 미리 정의해 놓은 위치에 삽입되도록 약속되어 있는 보이지 않는 요소

CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다.

::pseudo-element {
    property: value;
}

기본적인 가상 요소

• :before : 가장 앞에 요소를 삽입
• :after : 가장 뒤에 요소를 삽입

애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 한다.

• :first-line : 요소의 첫 번째 줄에 있는 텍스트
• :first-letter : 블록 레벨 요소의 첫 번째 문자

p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }