[CSS] 기본선택자, 복합선택자

CSS 선택자(Selector)란 html에 스타일을 넣어줄 때 기준이 되는 것. HMTL 구조를 시각적인 디자인과 레이아웃으로 표현하는데 CSS인데 이를 통해 특정 요소들을 선택해 스타일을 적용해줄 수 있다.

🌱기본 선택자

전체 선택자

• 모든 요소들에 동일한 효과를 줄 때 사용하는 선택자

* { color : red; }

태그 선택자 (Type selector)

• html 태그 이름을 사용하여 나타내는 선택자

p { color : red; }

클래스 선택자 (Class selector)

• .클래스이름 을 사용하여 나타내는 선택자

.orange { color : red; }

ID 선택자 (Id selector)

• #아이디이름 을 사용하여 나타내는 선택자

#orange { color : red; }

🌱복합 선택자

일치 선택자 (Basic Combinator)

• 두 가지 조건을 동시에 만족하는 요소 선택 - '.' 으로 표시

span.orange{/*일치 선택자, span태그의 orange 클래스*/
    color:red;
}

자식 선택자

• a를 먼저 찾고 a의 자식 요소인 b를 선택 - '>' 로 표시

ul>.orange{/*ul의 자식요소중에서 orange 클래스*/
    color: red;
}

하위(후손) 선택자

• a를 먼저 찾고 하위 요소 b 선택 - ' ' 띄어쓰기가 선택자 기호

div .orange{/*div의 후손요소중에서 orange 클래스*/
    color: red;
}

인접 형제 선택자

• 같은 부모를 공유하는 태그의 다음 형제 요소 하나만 선택 - '+' 로 표시

.orange + li{/*orange 클래스의 다음 형제요소*/
    color: red;
} 
<ul>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고<li> <!--선택-->
</ul>

일반 형제 선택자

• 선택자 a의 다음 형제 요소 모두 선택 - '~' 로 표시

.orange ~ li{/*orange 클래스의 다음 일반 형제요소들 모두*/
    color: red;
}