[CSS] CSS선택자 여러 개 선택, 다중선택하기

 

 

가끔 CSS코드를 보다보면 

선택자들을 공백없이 붙여서 사용하는 것도 있고

공백을 넣어서 사용할때도 있고

쉼표로 구분하는것도 있어서
무엇인지 헷갈렸던 부분이 있습니다. 

 

 

마침 칸아카데미에 관련설명이 있어서 강의를 들으면서 정리를 해봤습니다.

 

 

---

 

 

여러개 선택자를 한꺼번에 스타일을 적용하고 싶은 경우 

이건 쉽습니다, 그냥 쉼표(,)로 구분합니다.    

h1, h2 {
        font-family: cursive;
}

 

 

그런데, 아래의 경우들이 다소 헷갈릴때가 있습니다. 

---

 

태그선택자와 클래스 선택자를 결합해서 쓰는 경우

 p.warning{
            border: 5px solid orange;
 }

위의 예시는 태그(p)와 클래스(.warning) 사이에  공백이 없습니다.

이런 케이스는  클래스 선택자들 중에 태그 안에 들어간 클래스 선택자만  다른 CSS를 적용하고 싶을때에 사용합니다. 

 

좀 더 자세히 살펴보자면 warning클래스 중에 'Warning : Eating too many~~~ ' 이 문장만 노란색 테두리로 강조하고 싶을때  아래 예시의 5번째 줄에 있는 코드처럼  태그선택자(p)와 클래스 선택자(.warning)를  공백없이 사용하면 됩니다! 

 

 

 

 

---

 

클래스 선택자 중에서 부모태그와  결합해서 쓰는 경우

 p .purple {
            color: purple;
            background-color: transparent;
 }

위의 예시는 태그 선택자(p)와 클래스선택자(.purple)가 공백이 있습니다!! 

이런 케이스는  .purple이 하위 선택자일때 공백을 띄우고 사용합니다. 

 

아래 예시의 하단을 보시면 purple클래스가 p의 하위인 것을 알수 있습니다. 

 

 

---

 

 

정리 

• 기본적으로 여러 개  선택자를 묶어서 사용하고 싶을때는 쉼표(,)로 구분한다.
• 그런데, 만약 여러 개의 클래스 중에 한 녀석만 다른 스타일로 만들고 싶을때는
  부모태그가 다른지 보고 다르다면 부모와 하위 선택자는 공백을 띄워 표시하자. 
• 아니면 태그안에  클래스선택자가 있는 경우라면 둘은 공백없이 붙여서 표시하자!