코딩스쿨

CSS Selectors

1. CSS 선택자란?

CSS 선택자는 HTML 요소를 선택하여 해당 요소에 스타일을 적용하는 규칙을 정의하는 역할을 합니다. 선택자를 사용하여 웹 페이지의 특정 요소, 그룹, 또는 구조에 맞춘 스타일링이 가능합니다.

CSS 선택자는 크게 기본 선택자, 조합 선택자, 의사 클래스 및 의사 요소로 구분할 수 있습니다.

2. 기본 선택자 (Simple Selectors)

2.1 요소 선택자 (Element Selector)

HTML 요소 이름을 사용하여 해당 요소에 스타일을 적용합니다. 예를 들어, p 선택자는 페이지 내의 모든 <p> 요소에 스타일을 적용합니다.

p {
    color: blue;
    font-size: 16px;
}

2.2 클래스 선택자 (Class Selector)

HTML 요소에 클래스 이름을 부여한 후, 해당 클래스 이름을 선택하여 스타일을 적용합니다. 클래스 선택자는 **.**으로 시작합니다. 같은 클래스 이름을 여러 요소에 적용할 수 있습니다.

<p class="highlight">This is a highlighted paragraph.</p>

.highlight {
    color: green;
    font-weight: bold;
}

2.3 ID 선택자 (ID Selector)

HTML 요소에 ID를 부여하고, **#**으로 시작하는 ID 선택자를 사용해 해당 요소에만 스타일을 적용합니다. ID는 문서 내에서 고유해야 합니다.

<p id="unique">This paragraph has a unique style.</p>

#unique {
    color: red;
    font-style: italic;
}

2.4 그룹 선택자 (Group Selector)

여러 요소에 동일한 스타일을 적용하고 싶을 때 선택자를 쉼표로 구분하여 그룹으로 지정할 수 있습니다.

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

3. 조합 선택자 (Combinator Selectors)

3.1 자손 선택자 (Descendant Selector)

특정 요소 안에 있는 모든 하위 요소에 스타일을 적용합니다. 선택자 사이에 공백을 사용합니다.

div p {
    color: gray;
}

위의 코드는 모든 <div> 요소 안에 있는 <p> 요소에 스타일을 적용합니다.

3.2 자식 선택자 (Child Selector)

직계 자식 요소에만 스타일을 적용합니다. 선택자 사이에 > 기호를 사용합니다.

ul > li {
    list-style-type: none;
}

이 코드는 <ul> 요소의 직계 자식인 <li> 요소에 스타일을 적용합니다.

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

특정 요소 바로 다음에 위치한 형제 요소에 스타일을 적용합니다. 선택자 사이에 + 기호를 사용합니다.

h1 + p {
    margin-top: 0;
}

이 코드는 <h1> 바로 다음에 오는 <p> 요소에만 스타일을 적용합니다.

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

특정 요소 뒤에 오는 모든 형제 요소에 스타일을 적용합니다. 선택자 사이에 ~ 기호를 사용합니다.

h1 ~ p {
    color: blue;
}

이 코드는 <h1> 뒤에 오는 모든 <p> 형제 요소에 스타일을 적용합니다.

4. 의사 클래스 (Pseudo-Classes)

의사 클래스는 특정 상태에 있는 요소에 스타일을 적용하는 선택자입니다.

4.1 `:hover`

요소에 마우스를 올렸을 때 스타일을 변경합니다.

a:hover {
    color: red;
}

이 코드는 링크에 마우스를 올리면 텍스트 색상을 빨간색으로 변경합니다.

4.2 `:first-child`

부모 요소의 첫 번째 자식 요소에 스타일을 적용합니다.

p:first-child {
    font-weight: bold;
}

부모 요소의 첫 번째 자식이 <p>인 경우, 그 <p> 요소에만 스타일을 적용합니다.

4.3 `:last-child`

부모 요소의 마지막 자식 요소에 스타일을 적용합니다.

p:last-child {
    color: green;
}

부모 요소의 마지막 자식인 <p> 요소에 스타일을 적용합니다.

4.4 `:nth-child()`

부모 요소의 n번째 자식 요소에 스타일을 적용합니다. n은 숫자 또는 수식이 될 수 있습니다.

li:nth-child(2) {
    color: blue;
}

이 코드는 목록에서 두 번째 <li> 요소에 스타일을 적용합니다.

5. 의사 요소 (Pseudo-Elements)

의사 요소는 HTML 요소의 특정 부분에 스타일을 적용할 때 사용합니다.

5.1 `::before`

요소의 내용 앞에 생성된 콘텐츠에 스타일을 적용합니다.

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

이 코드는 모든 <p> 요소 앞에 "Note: "라는 텍스트를 추가하고, 굵게 표시합니다.

5.2 `::after`

요소의 내용 뒤에 생성된 콘텐츠에 스타일을 적용합니다.

p::after {
    content: " [End]";
}

이 코드는 모든 <p> 요소 뒤에 " [End]"라는 텍스트를 추가합니다.

5.3 `::first-letter`

요소의 첫 번째 글자에 스타일을 적용합니다.

p::first-letter {
    font-size: 2em;
    color: red;
}

이 코드는 모든 <p> 요소의 첫 글자를 두 배 크기로 하고, 빨간색으로 표시합니다.

5.4 `::first-line`

요소의 첫 번째 줄에 스타일을 적용합니다.

p::first-line {
    font-weight: bold;
    color: blue;
}

이 코드는 모든 <p> 요소의 첫 번째 줄에 스타일을 적용합니다.

6. 속성 선택자 (Attribute Selectors)

속성 선택자는 특정 속성이 포함된 요소에 스타일을 적용하는 선택자입니다.

6.1 특정 속성이 있는 요소 선택

input[type="text"] {
    background-color: yellow;
}

이 코드는 type="text"인 <input> 요소에 스타일을 적용합니다.

6.2 속성 값을 포함하는 요소 선택

a[href*="example"] {
    color: red;
}

이 코드는 href 속성에 "example"을 포함하는 모든 링크에 스타일을 적용합니다.

7. CSS 선택자 우선순위

CSS는 여러 선택자가 동일한 요소에 스타일을 적용할 때 우선순위(priority)를 따릅니다. 우선순위는 다음 순서로 적용됩니다:

인라인 스타일 (style="...")
ID 선택자 (#id)
클래스 선택자 (.class), 속성 선택자 ([attr="value"]), 의사 클래스 (:hover, :focus 등)
요소 선택자 (p, div 등) 및 의사 요소 (::before, ::after 등)

우선순위가 같을 경우, 가장 나중에 선언된 스타일이 적용됩니다.

코딩 스쿨 CSS