CSS 선택자(.class.class & .class .class)

CSS 선택자(Selector)란?

CSS에서 선택자는 스타일을 지정하려는 요소를 선택하는 데 사용되는 패턴이다. 

 

---

 

 

정말 많은 종류의 선택자가 있지만 이번 포스팅에서는 class 선택자에 대해서만 다룰 예정이다.

 

일반적으로 클래스 선택자로 css 속성을 적용할 때는 하나 혹은 그 이상의 클래스들을 나열해서 사용을 한다.

 

.class1.class2    &    .class1 .class2

 

대부분 위에 적힌 두 가지 방법을 쓰거나 다른 선택자들도 덧붙여서 사용을 할 텐데 위의 선택자간의 차이는 대충 보면 잘 안보일만큼 근소한 띄어쓰기 하나인데 이 띄어쓰기가 꽤나 큰 차이를 만들어 낸다.

 

.class1.class2

띄어쓰기가 없는 첫 번째 형태의 선택자 정의이다.

예시	설명
.name1.name2	클래스 속성 내에 name1 및 name2가 모두 설정된 모든 요소를 선택합니다.

 

See the Pen Untitled by JeongJoo Lee (@joometa) on CodePen.

.class1 .class2

띄어쓰기가 있는 두 번째 형태의 선택자 정의이다.

예시	설명
.name1 .name2	name1 요소의 하위 요소인 name2의 모든 요소를 선택합니다.

See the Pen .class1.class2 by JeongJoo Lee (@joometa) on CodePen.

 

정의된 내용과 사례만 봐도 사용되는 상황이 아주 다르다고 볼 수 있다.

 

두번째 선택자의 경우는 javascript를 곁들여서 class를 추가하고 빼고 하면서 상태를 바꾸는 용도로 활용을 할 수가 있다.