Attribute Selectors

 

🟢 Attribute Selectors

HTML 요소의 속성(attribute)이나 속성 값에 따라 특정 요소를 선택하는 방법.

 

◼ 기본 속성 선택자

• [속성]: 해당 속성을 가지고 있는 모든 요소 선택.

/* type 속성을 가진 모든 input 요소 선택 */
input[type] {
    border: 1px solid black;
}

 

• [속성="값"]: 속성값이 지정한 값과 정확히 일치하는 요소 선택.

/* type="text"인 요소만 선택 */
input[type="text"] {
    background: yellow;
}

 

 

◼ 문자열 매칭 선택자 (패턴 매칭)

• [속성^="값"]: 값이 특정 문자로 시작하는 요소 선택. (Start with)

/* https로 시작하는 링크 선택 */
a[href^="https"] {
    color: blue;
}

 

• [속성$="값"]: 값이 특정 문자로 끝나는 요소 선택. (End with)

/* .pdf로 끝나는 링크 선택 */
a[href$=".pdf"] {
    color: green;
}

 

• [속성*="값"]: 값이 특정 문자를 포함하고 있는 요소 선택. (Contains)

/* href에 "google"이 포함된 모든 링크 선택 */
a[href*="google"] {
    color: red;
}

 

 

◼ 단어 및 언어 선택자

• [속성~="값"]: 공백으로 구분된 값 중 하나가 일치하는 요소 선택.

/* 클래스 목록 중 active가 포함된 요소 선택 */
[class~="active"] {
    font-weight: bold;
}

 

• [속성|="값"]: 값이 정확히 일치하거나, 해당 값 뒤에 하이픈(-)으로 연결된 단어로 시작하는 요소 선택.

/* btn 또는 btn-* 형태 선택 */
[class|="btn"] {
    color: white;
}

 

 

📍  POINT 📍 

✔️ 속성 선택자는 HTML에 클래스를 일일이 추가하지 않고도 기존 속성만으로 스타일을 제어할 수 있게 한다. ✔️

✔️ input 태그의 각 타입을 구분하거나, 파일 확장자에 따라 아이콘을 붙일 때 유용하다. ✔️

✔️ 대소문자를 구분하지 않고 싶다면 닫는 대괄호 앞에 i를 붙일 수 있다. (예: [href$=".jpg" i]) ✔️

 

 

📋 속성 선택자 기호 요약표 📋

선택자 기호	의미	활용 예시
[attr]	속성 존재 여부	[required] (필수 입력 항목)
[attr="val"]	값이 정확히 일치	[type="submit"] (제출 버튼)
[attr^="val"]	값의 시작 부분 일치	[href^="mailto:"] (이메일 링크)
[attr$="val"]	값의 끝 부분 일치	[src$=".png"] (PNG 이미지)
[attr*="val"]	값의 일부분 포함	[class*="nav-"] (내비게이션 요소)

 

---

 

⚙️ 실전 예제 코드: 입력창 유형별 스타일링 ⚙️

<style>
  /* 모든 input 중 필수 입력(required) 속성이 있는 것 */
  input[required] { border: 2px solid red; }

  /* type이 "text"인 입력창만 선택 */
  input[type="text"] { width: 300px; }

  /* type이 "password"인 입력창만 선택 */
  input[type="password"] { background-color: #f0f0f0; }

  /* name 속성에 'user'가 포함된 모든 요소 */
  input[name*="user"] { color: blue; }
</style>

<form>
  <input type="text" name="user-id" placeholder="아이디" required>
  <input type="password" name="user-pw" placeholder="비밀번호">
  <input type="tel" name="phone" placeholder="전화번호">
</form>