[프론트엔드] CSS 선택자 종류 및 예제

 1. Universal Selector (전체 선택자)

전체 선택자는 HTML 문서 내의 모든 요소를 선택합니다

즉, 모든 요소에 동일한 스타일을 적용하려는 경우에 사용됩니다

예를 들어, 모든 요소의 글꼴을 Arial로 설정하고 여백을 0으로 만들려면 다음과 같이 작성할 수 있습니다

* {
    font-family: Arial;
    margin: 0;
    padding: 0;
}

 

2. Type Selector (타입 선택자)

타입 선택자는 HTML 요소의 유형을 선택합니다

특정 태그의 모든 인스턴스에 스타일을 적용할 때 유용합니다

예를 들어, 모든 `<h1>` 태그에 대해 글꼴 크기를 24px로 설정하고 색상을 파란색으로 지정하려면 다음과 같이 작성할 수 있습니다

h1 {
    font-size: 24px;
    color: blue;
}

 

3. Class Selector (클래스 선택자)

클래스 선택자는 HTML 요소의 클래스를 선택합니다

여러 요소에 동일한 스타일을 적용하려는 경우에 유용합니다

 

예를 들어, 클래스가 "highlight"인 모든 요소에 대해 배경색을 노란색으로 설정하려면 다음과 같이 작성할 수 있습니다

.highlight {
    background-color: yellow;
}

 

4. ID Selector (아이디 선택자)

아이디 선택자는 HTML 요소의 고유한 아이디를 선택합니다

페이지 내에서 특정 요소에 고유한 스타일을 적용할 때 사용됩니다

 

예를 들어, 아이디가 "header"인 요소에 대해 배경색을 회색으로 설정하고 글꼴을 굵게 설정하려면 다음과 같이 작성할 수 있습니다

#header {
    background-color: gray;
    font-weight: bold;
}

 

5. Attribute Selector (속성 선택자)

속성 선택자는 특정 HTML 요소의 속성을 선택합니다

특정 속성을 가진 요소에 스타일을 적용하는 데 사용됩니다

 

예를 들어, `target="_blank"` 속성을 가진 모든 링크에 대해 글꼴 색상을 빨간색으로 설정하려면 다음과 같이 작성할 수 있습니다

a[target="_blank"] {
    color: red;
}

 

6. Descendant Selector (하위 선택자)

하위 선택자는 특정 요소의 하위 요소를 선택합니다

부모 요소와 하위 요소는 공백으로 구분됩니다

 

예를 들어, `<div>` 요소 내부에 있는 모든 `<p>` 요소에 대해 특정 스타일을 적용하려면 다음과 같이 작성할 수 있습니다

div p {
    /* 스타일 적용 */
}

 

7. Child Selector (자식 선택자)

자식 선택자는 특정 요소의 직계 자식 요소를 선택합니다

부모 요소와 자식 요소는 `>` 기호로 구분됩니다

 

예를 들어, `<div>`의 직계 자식인 `<p>` 요소에 대해 스타일을 적용하려면 다음과 같이 작성할 수 있습니다

div > p {
    /* 스타일 적용 */
}

 

8. Adjacent Sibling Selector (인접 형제 선택자)

인접 형제 선택자는 특정 요소의 바로 뒤에 나오는 형제 요소를 선택합니다

두 요소는 같은 부모를 가져야 합니다

 

예를 들어, `<h2>` 바로 뒤에 나오는 `<p>` 요소에 대해 스타일을 적용하려면 다음과 같이 작성할 수 있습니다

h2 + p {
    /* 스타일 적용 */
}

 

9. General Sibling Selector (일반 형제 선택자)

일반 형제 선택자는 특정 요소 뒤에 나오는 모든 형제 요소를 선택합니다

형제 요소는 `~` 기호로 구분됩니다

예를 들어, `<h2>` 뒤에 나오는 모든 `<p>` ㅛㅇ소에 대해 스타일을 적용하려면 다음과 같이 작성할 수 있습니다

h2 ~ p {
    /* 스타일 적용 */
}