css선택자 [class*="name"] class다중선택

무려 4개월 만에 돌아온 css 강좌입니다.

날마다 오는 클라스가 아니여~

 

오늘은 css 선택자 중 하나인 class 선택자에 대해서 알아보겠습니다.

이 class 선택자는 내가 지정한 class중에서 동일한 문자를 포함하고 있는 클래스들을 모두 선택해줍니다.

 

기본적으로 아래와 같이 요소를 선택해서 스타일을 주는데요

.name{height:100px;}

 

아래와 같이 중복되는 스타일을 가진 요소들이 있을 때 단순하게 아래와 같이 작업을 하는 경우가 있었을 겁니다.

<style>
  .name1{height:100px;color:#ddd;}
  .name2{height:100px;color:#ccc;}
  .name3{height:100px;color:#333;}
  .name4{height:100px;color:#000;}
  .name5{height:100px;color:#fff;}
</style>

<div class="name1">1</div>
<div class="name2">2</div>
<div class="name3">3</div>
<div class="name4">4</div>
<div class="name5">5</div>

.name1,2,3,4,5라는 요소에 height라는 공통적인 스타일이 있습니다.

저렇게 사용해도 상관은 없지만, 나중에 유지보수할 경우 똑같은 일을 5번 반복해야하는 상황도 생기고 코드가 불필요하게 길어지면서 지저분해보이기까지 하는 단점이 생깁니다.

 

물론 이런 상황에서 아래와 같이 할 수도 있습니다.

.name1,
.name2,
.name3,
.one_name,
.name5{height:100px;}

 

위와 같이해도 상관은 없지만 class 선택자를 사용해서 작업하는 법을 한 번 보겠습니다.

[class*='name']{height:100px;}

class 명에 'name'이라는 이름을 포함한 요소들을 선택해서 height라는 공통 스타일을 주었습니다.

 

 

종종 사용하게 되는 유용한 css 선택자입니다.

 

오늘은 간단히 class 선택자에 대해서 알아보았습니다.

 

그럼 다음에 다시 만나요~