선택자(5)_속성 선택자

aepee·2020년 10월 2일
0
  • [attr]

  • html의 속성( attribute )을 가지고 선택하는 개념

  ( css 속성은 property )
  • 요소마다 불필요한 class를 부여하지 않아도 된다는 장점이 있음!!


[attr]

  • 특정한 속성을 포함한 요소를 선택

  • 마지막 input영역의 투명도를 조절하고 싶다면..?



html

  <input type="text" value="banana">
  <input type="password" value="1234">
  <input type="text" value="disabled text" disabled>

css

  [disabled] {
      opacity: 0.5;
}


[attr=value]

  • 속성 값이 value인 요소 선택

  • 두 번째 input 영역의 투명도를 조절하고 싶다면..?

html

  <input type="text" value="banana">
  <input type="password" value="1234">
  <input type="text" value="disabled text" disabled>

css

  [type="password"] {
      opacity: 0.5;
  }


[attr^=value]

  • 속성 값이 value시작하는 요소 선택

html

  <button class="btn-spring">spring</button> 
  <button class="btn-summer">summer</button> 
  <button>autumn</button>

css

  [class^="btn-"] {
      font-weight: bold;
      border-radius: 5px;
  }



[attr$=value]

  • 속성 값이 value끝나는 요소 선택

html

  <button class="btn-spring">spring</button> 
  <button class="btn-summer">summer</button> 
  <button>autumn</button>

css

  [class$="spring"] {
      color: green;
  }

  [class$="summer"] {
      color: blue;
  }

profile
📝내가 보려고 기록하는 블로그

0개의 댓글