[날마다 3분 CSS] CSS 선택자 #복합

시작

아파트를 건설할때 골격을 세우고 인테리어 설계도를 통해 각 집의 호수마다 집의 디자인을 입히는 것 처럼

CSS 선택자란

HTML로부터 웹컨텐츠의 구조(골격)를 형성하고 시각적인 디자인과 레이아웃( 디자인 )을 표현하기위해서는

각 집의 호수, 한마디로 디자인 할 위치를 선택해주는 설계도가 있어야한다.

이때, 설계도가 CSS 선택자이다.

 

선택자의 종류

---

일치 선택자

일치 선택자(Basic Combinator)는 입력되어있는 CSS속성을 모두 동시에 만족하는 요소를 선택하여

CSS속성을 적용한다.

 

선택자가 span.red 인 경우에는 태그가 <span>이면서 red라는 클래스를 가지고 있어야 적용이 됩니다.

정확히 명시할 때 사용합니다.

💫예시

span.red {
  color: red;
}

 

---

자식 선택자

자식 선택자(Child Combinator)는 선택요소의 직계자식만 선택하여 속성을 적용합니다.

 

선택자가 ul > .red 이면 ul 태그의 바로 밑 자손에만 속성이 적용됩니다

💫예시

#container > ul {
  border: 1px solid black;
}

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

#container > ul 선택자는 id가 container인 div의 직계 자손인 ul만 대상으로 삼습니다.
예를 들어 첫 번째 li의 자식인 List Item의 바로 밑ul은 대상이 되지 않습니다.

 

---

하위(후손) 선택자

하위 선택자는(Descendant Combinator)후손 요소를 선택합니다.  '띄어쓰기'가 선택자의 기호로 사용됩니다.
div 코드 안에 있는 모든 태그들 중 gray 클래스를 갖고 있는 모든 선택자를 선택합니다.

 

아래와 같이 작성하면 div클래스의 후손중 gray 클래스를 갖고 있는 모든 요소가 선택되어 적용됩니다.

💫예시

div .gray {
  color: gray;
}

<div>
  <ul>
    <li>빨간색</li>
    <li>파란색</li>
    <li class="gray">회색</li> <!-- 선택 -->
  </ul>
  <div>빨간색</div>
  <div>파란색</div>
  <span class="gray">회색</span> <!-- 선택 -->
</div>
<spna class="gray">회색</span>

 

---

인접 형제 선택자

인접 형제 선택자(Adjacent Sibling Combinator)는 "+"를 기준으로 앞의 요소 바로 뒤에 있는 요소만 

선택합니다.  아래 코드에서 orange클래스 뒤에 오는 첫 번째 li태그( <li>망고</li> )만 오렌지색이 됩니다.

 

💫예시

.orange + li {
  color: orange;
}

<ul>
  <li>딸기</li>
  <li>수박</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- 선택 -->
  <li>사과</li>
</ul>

 

---

 

일반 형제 선택자

일반 형제 선택자(General Sibling Combinator)는 "~"를 기준으로 앞의 요소 바로 뒤에 있는 요소 모두를 

선택합니다. 

아래 코드에서 orange 클래스의 일반 형제는 딸기, 수박, 망고, 사과 등이지만 "다음"에 있는 형제들이 선택되기 때문에 망고와 사과만 선택됩니다.

 

💫예시

.orange ~ li {
  color: orange;
}

<ul>
  <li>딸기</li>
  <li>수박</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- 선택 -->
  <li>사과</li> <!-- 선택 -->
</ul>