속성 선택자

주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.

👉 특성 선택자 MDN 문서

• 구문

  • [attr]

    attr 이라는 이름의 속성을 가진 요소를 선택한다.

  • [attr=value]

    attr 이라는 이름의 속성값이 정확히 value인 것을 선택한다.

  • [attr~=value]

    attr 이라는 이름의 속성값이 정확히 value인 것을 선택한다. 이 속성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있다.

  • [attr^=value] 시작

    attr 이라는 속성을 갖고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택한다.

  • [attr$=value] 끝

    attr 이라는 속성을 갖고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택한다.

  • [attr=value] 포함*

    attr 이라는 속성을 갖고 있으며, 값 안에 value 라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택한다.

  /* 속성 값을 기준으로 선택 */
  a[href="<https://www.yalco.kr>"] {
    color: #ff4e00;
    font-weight: bold;
  }
  
  /* 특정 속성이 있는 요소 선택 */
  input[disabled]+label {
    color: lightgray;
    text-decoration: line-through;
  }
  
  /* 속성값이 특정 텍스트를 포함하는 요소 */
  span[class*="item"] {
    text-decoration: underline;
  }
  
  /* 속성값이 특정 텍스트로 시작하는 요소 */
  span[class^="fruit"] {
    color: tomato;
  }
  span[class^="vege"] {
    color: olivedrab;
  }
  
  /* 속성값이 특정 텍스트로 끝나는 요소 */
  span[class$="-1"] {
    font-weight: bold;
  }
  

가상 클래스

가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다.

예를 들어 :hover를 사용하면 포인터를 올렸을 때 디자인의 변화를 부른다.

👉 가상 클래스 MDN 문서

/* 마우스오버 */
a:hover {
  background-color: yellow;
}
/* 클릭중 */
a:active {
  background-color: aqua;
}

/* 체크된 것 */
input[type=radio]:checked+label {
  color: tomato;
  font-weight: bold;
}
/* 활성화된 것 */
input[type=radio]:enabled+label {
  text-decoration: underline;
}
/* 비활성화된 것 */
input[type=radio]:disabled+label {
  color: lightgray;
  text-decoration: line-through;
}

/* 인풋 등이 클릭되어 포커스된(입력을 받는) 상태 */
input[type="text"]:focus {
  /* border 밖의 선 (박스 요소가 아님) */
  outline: 2px solid dodgerblue;
}
/* 필수 입력요소 */
input:required {
  border-color: orangered;
}
/* 값이 유효한 입력요소 */
input[type="email"]:valid {
  border-color: green;
}
/* 값이 무효한 입력요소 */
input[type="email"]:not(:valid) {
  border-color: purple;
}

[class*="focus"]:focus {
  outline: 2px solid deeppink;
}
.tab-focus:focus,
.no-focus:focus {
  outline: none;
}
/* 탭으로 포커스된 요소에 적용 */
/* 브라우저 지원 확인 */
[class*="tab-focus"]:focus-visible {
  outline: 2px solid dodgerblue;
}

/* 부모 요소 내 첫 번째 ~요소 */
/* -- 선택자의 부모 요소 내부에 있는 것들 중
선택자의 타입과 같은 첫 번째 요소를 의미함. */

b:first-of-type {
  text-decoration: overline;
}
/* 부모 요소 내 마지막 ~요소 */
i:last-of-type {
  text-decoration: line-through;
}
/* 부모 요소 내 N번째 ~요소 */
b:nth-of-type(2) {
  text-decoration: underline;
}

/* 부모 요소 내 유일한 ~요소 */
div :only-of-type {
  text-decoration: overline line-through underline;
}
/* 부모 요소 내 종류 무관 유일한 요소 (독자) */
div :only-child {
  text-decoration: wavy underline tomato;
}

가상 요소

가상 요소는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.

👉 가상 요소 MDN 문서

/* 바로 뒤에 가상의 요소 추가 */
li.later::after {
  content: '다음 강좌'; /* 추가되는 요소에 들어갈 텍스트 */
  margin-left: 0.6em;
  padding: 0.16em 0.36em;
  font-size: 0.72em;
  font-weight: bold;
  color: white;
  background-color: darkmagenta;
  border-radius: 0.2em;
}

/* 바로 앞에 가상의 요소 추가 */
li::before {
  content: '';
  display: inline-block;
  margin: 0 0.4em;
  width: 0.8em;
  height: 0.8em;
  background-image: url(./check.png);
  background-size: contain;
}

/* 선택 영역(드래그) 가상 요소 */
.orange::selection {
  background-color: orange;
}
.dark::selection {
  color: lightgreen;
  background-color: #222;
}

/* 플레이스홀더 가상 요소 */
input:required::placeholder {
  color: darkred;
  background-color: yellow;
}