CSS 09 선택자2 (특성 ,결합)

선택자란: 어떤 요소에 스타일 줄 것인지 하는 정보

선택자 {
속성명: 속성값
}

 

선택자의 종류 [기본 그룹 특성 결합 의사 클래스 의사요소]

기본 그룹 저번에 햇고

 

특성, 결합 선택자

특성 선택자는 주어진 속성의 존재여부나 그 값에 따라 요소를 선택한다.

• 클래스 속성을 가지고 있는 요소를 선택하기(좌)
• 클래스가 item인 요소를 선택하기 [class]{ background-color: tomato;} 우 

 
[class]{ background-color: tomato;}

[class='item]{background-color:tomato;}

 

컨셉

결합 선택자는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다.

두가지로 구분

• 자손 결합자
• 형제 결합자

div p {color: white} div요소안에 위치하는 모든 p 요소를 선택

div >p{color: white} div요소안에 바로 아래에 위치하는 모든 p 요소를 선택

형제 선택

h1 ~ p{color: red'}

h1 + p{color:red;}

 

---

내용정리

• 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소 를 선택 한다.
• 특성 선택자는 값의 포함 여부 , 포함 위치 등을 통해서도 선택할 수 있다.
• 결합 선택자는 여러 선택자를 결합하여 요소를 선택한다.
• 자손 또는 형제 중에서 특정 조건을 만족하는 요소를 선택 할 수 있다.