[CSS] CSS 선택자

1. 전체 선택자(*)
스타일을 모든 요소에 적용할 때 사용합니다. 전체 선택자는 한 번에 많은 요소를 선택하고 한꺼번에 스타일을 적용하기 위해 사용합니다.

* { padding: 0; margin: 0; }


2. 요소 선택자
특정 요소가 쓰인 모든 요소에 스타일을 적용합니다.

h2 { color: orange; }

* 상속 : 부모 요소의 속성 값이 자식 요소에게 적용되는 속성입니다.


3. id 선택자(#)
아이디 선택자는 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용합니다. # 기호를 사용하여 id 속성을 가진 요소에 스타일을 지정합니다.

<h2 id="hello">안녕하세요.</h2>

#hello { color: red;} /* 요소에 관계없이 id hello인 요소를 선택합니다. */
h2#hello { color: red;} /* h2 요소에 id가 hello인 요소를 선택합니다. */


4. class 선택자(.)
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다. 특정 집단을 클래스라고 하여 .(점)기호를 사용하여 같은 클래스 이름을 가지는 요소들을 모두 선택해줍니다.

<h2 class="hello">안녕하세요.</h2>
...
<p class="hello">반갑습니다.</p>

.hello { color: red; }  /* 요소에 관계없이 class가 hello 요소를 선택합니다. */
p.hello { color: blue} /* p 요소에 class가 hello인 요소를 선택합니다. */
.hi { text-align: center; } /* 요소에 관계없이 class와 hi인 요소를 선택합니다. */

* <h2 class="hello hi">안녕하세요.</h2> /* hello class와 hi class 모두 적용 */


5. 그룹 선택자
그룹 선택자는 여러개의 요소를 나열하고 콤마(,)로 구분해 스타일을 한번에 정의해줍니다.

h3, p {text-align: center; }


6. 하위 선택자(자손)

조상의 요소 하위의 모든 요소를 선택합니다.
선택자를 여러 개 쓰는 경우를 복합 선택자라고 한다. 여러 종류가 있으니 알아보장.

1. 하위 선택자
   • 하위 선택자는 선택자 사이를 공백을 사용하여 나타냅니다.
   • 앞 요소의 자손인 뒷 요소를 선택합니다.
   • section ul { text-shadow: none; }

1. 자식 선택자
   • 하위 선택자는 선택자 사이를 > 를 사용하여 나타냅니다.
   • 앞 요소의 자식 인 뒷 요소를 선택합니다.
   • section > ul { text-shadow: none; }