폼(Form) 요소의 상태를 제어하거나 특정한 위치를 타겟팅할 때 유용한 선택자

1. 상태 관련 가상 클래스 (UI State)

사용자의 입력이나 요소의 특정 조건에 반응할 때 아주 강력합니다.

• :checked: 체크박스나 라디오 버튼이 선택된 상태를 타겟팅합니다.
• :disabled / :enabled: 활성 또는 비활성 상태인 입력창을 선택합니다.
• :required / :optional: required 속성이 있는(필수 입력) 필드와 없는 필드를 구분합니다.
• :placeholder-shown: 입력창에 플레이스홀더 텍스트가 보이고 있는 동안(즉, 사용자가 아무것도 입력하지 않았을 때) 스타일을 적용합니다.
• :invalid / :valid: 이메일 형식 등 입력값이 양식에 맞는지 여부에 따라 실시간 스타일 피드백을 줄 수 있습니다.

---

2. 위치 및 순서 관련 (Structural Pseudo-classes)

목록의 특정 순서를 정교하게 고를 때 사용합니다.

• :first-of-type / :last-of-type: 같은 형제 요소들 중 해당 태그의 첫 번째/마지막만 선택합니다. (중간에 다른 태그가 섞여 있어도 상관없습니다.)
• :only-child: 부모 안에 자식이 딱 하나만 있을 때만 선택합니다.
• :nth-last-child(n): 뒤에서부터 n번째인 요소를 선택합니다.
• :empty: 자식 요소나 텍스트 노드가 전혀 없는, 즉 완전히 비어 있는 요소를 선택합니다. (빈 공지사항 알림 등을 처리할 때 유용합니다.)

---

3. 사용자 행동 및 기타 (User Action & Others)

• :focus-within: 자신뿐만 아니라 자식 요소 중 하나라도 포커스를 받으면 스타일이 적용됩니다. (입력창을 감싼 행 전체에 불빛을 주고 싶을 때 유용합니다.)
• :target: URL 끝에 #id가 붙었을 때, 해당 ID를 가진 요소를 강조합니다. (자바스크립트 없이 탭 메뉴나 팝업을 만들 때 쓰입니다.)
• :read-only: 사용자가 수정할 수 없는 입력창만 골라 스타일을 줍니다.

---

🛠️ 게시판에 바로 적용해보기 (코드 예시)

이 선택자들을 활용하면 게시판의 가독성과 사용자 경험(UX)이 더 좋아집니다.

CSS

 

/* 1. 입력이 완료되지 않은(필수) 필드 옆에 작은 표시하기 */
input:required:invalid {
    border-right: 5px solid #ef4444;
}

/* 2. 행 안의 체크박스가 포커스되면 행 전체 테두리 강조 */
.table-body li:focus-within {
    outline: 2px dashed #2563eb;
}

/* 3. 게시글 목록이 완전히 비어있을 때 안내 메시지 자동 노출 */
.table-body:empty::before {
    content: "등록된 게시글이 없습니다.";
    display: block;
    padding: 50px;
    text-align: center;
    color: #94a3b8;
}

/* 4. 읽기 전용(readonly) 필드에 연한 회색 배경 주기 */
input:read-only {
    background-color: #f8fafc;
    cursor: default;
}

💡 선택자 조합의 묘미

이런 선택자들은 서로 조합할 때 가장 강력합니다. 예를 들어 li:not(.notice):nth-child(even)라고 쓰면 **"공지사항이 아닌 일반글 중 짝수 행"**만 정확히 골라낼 수 있죠.

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.