CSS 선택자 사용하기

5.1 기본 선택자 사용하기

5.1.1 전체 선택자

전체 선택자(*)는 문서 내의 모든 요소를 선택합니다.

사용 시기: 전체 요소에 공통적인 스타일을 적용할 때 사용됩니다.

예시:

* {
    margin: 0;
    padding: 0;
}

5.1.2 태그 선택자

태그 선택자는 특정 HTML 태그를 선택합니다.

사용 시기: 특정 태그에 스타일을 적용할 때 사용됩니다.

예시:

p {
    color: blue;
}

5.1.3 아이디 선택자

아이디 선택자(#)는 특정 아이디 값을 가진 요소를 선택합니다.

사용 시기: 문서 내에서 유일한 요소에 스타일을 적용할 때 사용됩니다.

예시:

#header {
    background-color: grey;
}

5.1.4 클래스 선택자

클래스 선택자(.)는 특정 클래스 값을 가진 요소를 선택합니다.

사용 시기: 여러 요소에 공통적인 스타일을 적용할 때 사용됩니다.

예시:

.highlight {
    color: red;
}

5.1.5 기본 속성 선택자

속성 선택자는 특정 속성을 가진 요소를 선택합니다.

사용 시기: 특정 속성값을 가진 요소에 스타일을 적용할 때 사용됩니다.

예시:

input[type="text"] {
    border: 1px solid #ccc;
}

5.1.6 문자열 속성 선택자

문자열 속성 선택자는 특정 속성값이 지정된 패턴과 일치하는 요소를 선택합니다.

사용 시기: 속성값의 부분 일치 등을 기반으로 스타일을 적용할 때 사용됩니다.

예시:

a[href^="https"] {
    color: green;
}

5.2 조합 선택자 사용하기

5.2.1 그룹 선택자

그룹 선택자(,)는 여러 요소를 동시에 선택합니다.

사용 시기: 여러 선택자에 동일한 스타일을 적용할 때 사용됩니다.

예시:

h1, h2, h3 {
    font-family: Arial, sans-serif;
}

5.2.2 자식 선택자

자식 선택자(>)는 특정 요소의 자식 요소를 선택합니다.

사용 시기: 부모와 직접적인 자식 관계에 있는 요소에 스타일을 적용할 때 사용됩니다.

예시:

div > p {
    color: blue;
}

5.2.3 하위 선택자

하위 선택자(공백)는 특정 요소의 하위 요소를 모두 선택합니다.

사용 시기: 특정 요소의 모든 자손 요소에 스타일을 적용할 때 사용됩니다.

예시:

div p {
    color: green;
}

5.2.4 인접 형제 선택자

인접 형제 선택자(+)는 특정 요소 바로 다음에 위치한 형제 요소를 선택합니다.

사용 시기: 특정 요소의 바로 다음 형제 요소에 스타일을 적용할 때 사용됩니다.

예시:

h1 + p {
    margin-top: 0;
}

5.2.5 일반 형제 선택자

일반 형제 선택자(~)는 특정 요소의 모든 형제 요소를 선택합니다.

사용 시기: 특정 요소의 뒤에 있는 모든 형제 요소에 스타일을 적용할 때 사용됩니다.

예시:

h1 ~ p {
    color: red;
}

5.3 가상 요소 선택자 사용하기

가상 요소 선택자는 요소의 특정 부분에 스타일을 적용할 수 있습니다.

주요 가상 요소 선택자:

• ::before: 요소의 내용 앞에 콘텐츠를 삽입합니다.
• ::after: 요소의 내용 뒤에 콘텐츠를 삽입합니다.
• ::first-letter: 첫 번째 글자에 스타일을 적용합니다.
• ::first-line: 첫 번째 줄에 스타일을 적용합니다.

예시:

p::before {
    content: "Note: ";
    font-weight: bold;
}

5.4 가상 클래스 선택자 사용하기

가상 클래스 선택자는 특정 상태나 위치의 요소를 선택하는 데 사용됩니다.

주요 가상 클래스 선택자:

• :hover: 요소에 마우스를 올렸을 때 스타일을 적용합니다.
• :focus: 요소가 포커스를 받을 때 스타일을 적용합니다.
• :nth-child(n): 부모의 n번째 자식 요소를 선택합니다.
• :first-child: 부모의 첫 번째 자식 요소를 선택합니다.
• :last-child: 부모의 마지막 자식 요소를 선택합니다.

예시:

a:hover {
    color: red;
}

5.5 다양한 선택자 조합하기

다양한 선택자를 조합하여 복잡한 선택 규칙을 만들 수 있습니다.

예시:

div.highlight > p:first-child {
    color: blue;
}