css 셀렉터 - 특성 선택자 [class *='text-'] 클래스 모두 선택하기

css선택자(css Selectors)는 아래와 같이 여러종류가 있습니다.

1. 클래스 선택자
2. 특성 선택자
3. ID 선택자
4. 유형 선택자
5. 전체 선택자

이 중 특성 선택자에 대해 알아보겠습니다.

특성 선택자란 주어진 특성을 가진 모든 요소를 선택하는 것을 말합니다.

특성 선택자 종류도 여러가지가 있는데요,  class*='포함할 클래스' 이렇게 사용하면 내가 만든 class이름을 포함하고 있는 모든 태그를 선택할 수 있습니다.

 

 

클래스 이름을 포함한 모든 태그를 선택하는 방법에 대해 아래 소스로 예를 들어보겠습니다.

'더보기' 라는 글자가 있고, 폰트사이즈와 여백값은 같고 색만 다르게 작업을 하였습니다.

 

<style>
  .text-color1 {font-size: 16px; padding: 5px 10px; color: pink;}
  .text-color2 {font-size: 16px; padding: 5px 10px; color: blue;}
  .text-color3 {font-size: 16px; padding: 5px 10px; color: green;}
  .text-color4 {font-size: 16px; padding: 5px 10px; color: loyalblue;}
  .text-color5 {font-size: 16px; padding: 5px 10px; color: gray;}
</style>

<div class="text-color1">더보기</div>
<div class="text-color2">더보기</div>
<div class="text-color3">더보기</div>
<div class="text-color4">더보기</div>
<div class="text-color5">더보기</div>

 

font-size와 padding값이 똑같이 반복되고 있습니다. 반복해서 사용해도 좋지만 코드가 길어져서 보기 안 좋습니다.

또한 컬러값이 더 늘어난다거나 값이 변경이 된다면 유지보수시 일일히 수정해야하는 번거로움이 있습니다.

 

 

 

이때 특성 선택자인  *= 를 이용하면 코드가 간단해집니다.

 

[class*='text-'] {font-size: 16px; padding: 5px 10px}

 

 

class가  text-를 반드시 포함한 모든 요소에 font-size와 padding 스타일을 주었습니다.

소스가 한결 간결해졌습니다. 

 

 

 

 

 

 

클래스뿐만 아니라 태그의 속성을 선택할 수도 있습니다.

속성값이 일치하는 것을 선택할 수도 있고,  특정단어로 시작하거나 끝나는 요소선택도 가능합니다.

아래에 특성선택자로 사용할 수 있는 예시가 있으니 참고해보세요~

/* p태그에 title이라는 속성을 가진 요소를 선택 */
p[title] {
  font-size: 30px;
  color: pink;
}

/* a태그 중에서 href라는 속성을 가지고 있으며 
속성값이 반드시 https://devsio.tistory.com와 일치하는 요소를 선택 */
a[href="https://devsio.tistory.com"] {
  color: green;
}

/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 example를 하나 이상 포함한 요소를 선택 */
a[href*="example"] {
  font-size: 2em;
}

/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 devsio로 시작하는 요소를 선택함 */
a[href^="https"] {
  font-style: italic;
}

/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 .com로 끝나는 요소를 선택함 */
a[href$=".com"] {
  font-style: italic;
}

/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 정확히 logo인 요소를 선택함. 
attr속성은 공백으로 구분한 여러 개의 값을 가지고 있을수 있음 */
a[class~="logo"] {
  padding: 2px;
}