[css 10초 컷] 다중 선택자 (CSS Selectors)

 

 

 

 

 

 

[css 10초 컷] CSS Selectors 입니다.

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

CSS에서 셀렉터는 스타일을 주고 싶은 요소를 선택할 때 사용하는 패턴입니다.

 

우리가 HTML에서 원하는 요소에 스타일을 주려고 할 때, 어떻게 했나요?

 

네. Class나 Id 속성을 활용하죠.

 

또한, 해당 태그명에 대해 직접 선언할 수도 있고, ::before나 ::after를 활용한 가상 선택자도 선택할 수 있습니다.

 

이 중, 두 개의 클래스를 활용해서 원하는 요소를 선택하는 다중 선택자을 살펴보겠습니다.

 

형태는 .class1.class2와 .class1 .class2가 존재합니다. 
(띄어쓰기 차이입니다)

 

좌는 붙어있고 우는 띄어져 있습니다

 

좌는 class1과 class2 둘 다 같은 클래스 속성안에 있는 요소를 모든 요소를 선택합니다.

우는 class1 요소의 하위 요소인 class2에 해당 하는 모든 요소를 선택합니다. 

 

만약, <div class="name1 name2">sample</div> 이라는 태그에서 class의 의미는 

name1과 name2 둘 다 가지게 된다는 의미입니다. 왜냐하면, class이름은 공백을 허용하지 않습니다.

 

정리하면,

 

.class1, .class2, .class3처럼 쉼표가 있을 경우는 각각 항목을 or로 적용합니다. 

 

.class1 .class2 .class3처럼 공백으로만 연결하면, 뒤에 나온 선택자가 하위 개체로 지정됩니다. 즉, 1 내부의 2 내부에 있는 3요소에만 적용 된다는 것입니다.

 

.class1.class2.class3처럼 공백없이 연결하면, class="a b c"처럼 모든 속성을 한 번에 적용 시키는 요소에만 지정한 설정이 적용됩니다.

 

 

 

 

 

 

 

 

 

 

 

참고 

https://blog.naver.com/PostView.nhn?blogId=shinekjm&logNo=221618781015
https://ppoote.tistory.com/127

https://www.w3schools.com/cssref/css_selectors.asphttps://www.w3schools.com/html/html_entities.asp