CSS 선택자
그룹 및 결합 선택자
그룹 및 결합 선택자란?
:: 그룹 및 결합 선택자는 앞에서 나온 단일 선택자들을 나열하거나 연결해서 특정한 요소를 나타낸다.
그룹 선택자
선택자 목록[Selector list] ( ,(comma) ) (MDN)
:: 목록 내의 선택자가 가리키는 모든 요소들을 선택한다.
:: 선택자 목록의 장점은 여러 요소에 똑같은 스타일을 적용할 때 코드를 줄일 수 있다는 것이다.
:: 선택자 목록의 단점은 목록 내 하나의 선택자라도 브라우저가 지원하지 않으면 목록 전체가 무효화 된다는 것이다.
:: 이를 방지하는 방법으로 :is() 나 :where() 같은 가상 클래스 함수를 사용할 수 있다.
:: 연결된 선택자 중 하나라도 만족하면 스타일이 적용되므로 or 연산이라고 생각할 수 있다.
ex) div, span, .i1, #c1 { style_properties }
<div> ... </div> <span> ... </span> <h1 id="i1"> ... </h1> <h2 class="c1"> ... </h2>
다중 클래스 선택자[Multiple Classes selector] ()
:: 2개 이상의 클래스를 동시에 가지고 있는 요소를 선택하고 싶을 때 사용한다.
:: 여러개의 클래스를 띄어쓰기 없이 쓰면 적용된다.
:: 클래스가 적용된 순서는 상관없다.
:: 선택된 클래스 모두를 가져야만 스타일이 적용되므로 and 연산이라고 생각할 수 있다.
ex) .c1.c2.c3{ style_properties }
<div class = "c1 c2"> </div> <div class = "c1 c2 c3"> </div> <div class = "c2 c1 c3"> </div>
요소 간의 관계
결합 선택자
자손 결합자[Descendant_combinator] ( (single space) ) (MDN)
:: 뒤쪽 선택자의 조상 중 앞쪽 선택자가 존재하는 모든 요소들을 선택한다.
:: 자손 결합자는 CSS의 공백 문자로 나타내므로 스페이스 외에도 탭문자나 CR, FF, NL 등으로도 나타낼 수 있다.
:: 또한 중간에 주석이 포함되어도 상관없다.
ex) div li { style_properties }
<div> <li> </li> </div> : li가 ul의 자식이니 적용 O
<li> <div> </div> </li> : li가 ul의 자식이나 자손이 아니므로 적용 X
<div> ... <li> <li> </li> </li> ... <div> : li가 ul의 자손이니 적용 O , li 안의 li도 ul의 자손인건 마찬가지니 적용 O.
<div> <ul> <section> <ol> <li> </li> </ol> </section> </ul> </div>
자식 결합자[Child_combinator] ( >(right angle bracket) ) (MDN)
:: 뒤쪽 선택자가 앞쪽 선택자의 자식인 모든 요소들을 선택한다.
:: 자손 결합자가 깊이에 상관없이 자손이면 모두 선택하는 것에 비해 자식 결합자는 더 엄격하다.
ex) div > p { style_properties }
<div> <p> </p> </div>: p가 div의 자식이니 적용 O
<div> <seciton> <p> </p> </seiction> </div> : p가 section의 자식이니 적용X
<div> <p> <p> </p> </p> </div>: 첫번째 p는 div의 자식이니 적용 O, 두번째 p는 첫번째 p의 자식이니 적용 X
일반 형제 결합자[General_sibling_combinator] ( ~(Tilde) ) (MDN)
:: 두 선택자의 부모가 같고, 뒤쪽 선택자가 앞쪽 선택자보다 뒤에 있는 모든 요소를 선택한다.
:: 이때 두 요소가 바로 붙어있을 필요는 없다.
ex) p ~ span { style_properties }
<p> <span> </span> <p>
: p와 span이 형제 관계가 아닌 부모 자식 관계이므로 적용 X
<body> <p> </p> <span> </span> </body>
: p와 span이 body라는 같은 부모를 갖고 span이 p의 뒤에 있으므로 적용 O
<body> <span> </span> <p> </p> <span> </span> </body>
: 첫번째나 두번째 span 모두 p와 같은 부모를 같지만 p의 뒤에 있는건 두번째 span 뿐이므로 두번째에만 적용 O
<body> <p> </p> <span> </span> <div> </div> <span> </span> <body>
인접 형제 결합자[Adjacent_sibling_combinator] ( +(Cross sign) ) (MDN)
:: 두 선택자의 부모가 같고, 뒤쪽 선택자가 앞쪽 선택자의 바로 뒤에 있는 모든 요소를 선택한다.
ex) p + div { style_properties }
<body> <p> </p> <div> </div> </body>
: p와 div가 body라는 같은 부모를 갖고, div가 p의 바로 뒤에 있으므로 적용 O
<body> <p> </p> <span> </span> <div> </div> </body>
: p와 div가 body라는 같은 부모를 같지만, div와 p가 span에 의해서 떨어져 있으므로 적용 X
썸네일용