2. CSS 기타 선택자

CSS에서는 기본 선택자 외에도 다양한 기타 선택자를 제공하여 웹 페이지의 스타일을 더욱 세밀하게 제어할 수 있습니다. 이번 글에서는 속성 선택자, 자손 및 후손 선택자, 동위 선택자, 반응 선택자, 그리고 상태 선택자에 대해 설명하겠습니다.

1. 속성 선택자

속성 선택자는 특정 속성과 그 값을 가진 HTML 요소를 선택할 때 사용됩니다. 선택자 뒤에 대괄호 []를 사용하여 속성과 속성값을 지정합니다.

선택자[속성  = 속성값]
선택자[속성 ~= 속성값]
선택자[속성 |= 속성값]
선택자[속성 ^= 속성값]
선택자[속성 $= 속성값]
선택자[속성 *= 속성값]{
    스타일 속성: 값;
    ...
}

• 선택자[속성=값]: 특정 속성에 특정 값을 가진 요소를 선택합니다.

• 선택자[속성~=값]: 특정 속성에 지정된 단어를 포함하는 요소를 선택합니다.

• 선택자[속성|=값]: 특정 속성 값이 지정된 값으로 시작하거나, -로 연결된 요소를 선택합니다.

• 선택자[속성^=값]: 특정 속성 값이 지정된 값으로 시작하는 요소를 선택합니다.

• 선택자[속성$=값]: 특정 속성 값이 지정된 값으로 끝나는 요소를 선택합니다.

• 선택자[속성*=값]: 특정 속성 값에 지정된 값이 포함된 요소를 선택합니다.

<div class="div-class" name="name1">div1</div>
<div class="div-class" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<div class="class-div" name="name4">div4</div>

2. 자손 선택자와 후손 선택자

자손 및 후손 선택자는 요소들 간의 관계를 기반으로 특정 요소를 선택할 때 사용됩니다.

/* 자손 선택자 */
a > b {
    스타일 속성: 값;
    ...
}
/* 후손 선택자 */
a b {
    스타일 속성: 값;
    ...
}

• a > b: a 요소의 바로 하위에 있는 b 요소만을 선택합니다.

• a b: a 요소의 모든 하위 요소 중에서 b 요소를 선택합니다.

<div id="test1">
    <h4>div의 자손이면서 후손입니다</h4>
    <h4>div의 자손이면서 후손입니다</h4>
    <ul>div의 자손이면서 후손입니다
        <li>ul태그의 자손이면서 div의 후손</li>
        <li>ul태그의 자손이면서 div의 후손</li>
    </ul>
</div>

3. 동위(같은 레벨) 선택자

동위 선택자는 같은 레벨에 위치한 특정 요소를 선택할 때 사용됩니다.

/* a 요소 바로 뒤에 있는 b 요소 하나만 선택 */
a + b {
    스타일 속성: 값;
    ...
}
/* a 요소 뒤에 있는 모든 b 요소를 선택 */
a ~ b {
    스타일 속성: 값;
    ...
}

• a + b: a 요소 바로 뒤에 있는 b 요소 하나만을 선택합니다.
• a ~ b: a 요소 뒤에 있는 모든 b 요소를 선택합니다.

<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<ul>ul</ul>
<div>div5</div>

4. 반응 선택자

반응 선택자는 사용자의 상호작용에 따라 스타일을 적용할 때 사용됩니다.

/* 해당 요소가 클릭되었을 때 스타일 부여 */
선택자:active {
    스타일 속성: 값;
    ...
}
/* 해당 요소에 마우스가 올라갔을 때 스타일 부여 */
선택자:hover {
    스타일 속성: 값;
    ...
}

• 선택자:active: 요소가 클릭된 상태일 때 스타일을 적용합니다.
• 선택자:hover: 요소에 마우스가 올라갔을 때 스타일을 적용합니다.

<div id="active-test" class="area">activetest</div>
<br><br>
<div id="hover-test" class="area">hovertest</div>
<br><br>

5. 상태 선택자

상태 선택자는 요소의 상태에 따라 스타일을 적용할 때 사용됩니다.

/* 체크된 상태의 요소 선택 */
선택자:checked {
    스타일 속성: 값;
    ...
}
/* 초점이 맞춰진 input 요소 선택 */
선택자:focus {
    스타일 속성: 값;
    ...
}
/* 활성화된 요소 선택 */
선택자:enabled {
    스타일 속성: 값;
    ...
}
/* 비활성화된 요소 선택 */
선택자:disabled {
    스타일 속성: 값;
    ...
}

• 선택자:checked: 체크된 상태의 요소에 스타일을 적용합니다.
• 선택자:focus: 초점이 맞춰진 요소에 스타일을 적용합니다.
• 선택자:enabled: 활성화된 요소에 스타일을 적용합니다.
• 선택자:disabled: 비활성화된 요소에 스타일을 적용합니다.

<input type="checkbox" id="apple">
<label for="apple">사과</label>

<input type="checkbox" id="banana">
<label for="banana">바나나</label>
<br>
아이디: <input type="text" name="userID"> <br>
비밀번호: <input type="password" name="userPwd" id="">
<br><br>

<input type="button" value="클릭불가" disabled>
<button>클릭가능</button>
<button disabled>클릭기능사용불가</button>