[CSS] 결합자

* 자식 결합자 *
- 자식 결합자(Child Combinator)는 어떠한 부모 선택자에 대한 자식을 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
  "어떠한 부모 선택자" > "자식 선택자" {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }
* 자손 결합자 *
- 자손 결합자(Descendant Combinator)는 어떠한 부모 선택자에 대한 자손을 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
  "어떠한 부모 선택자" "자손 선택자" {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }
* 일반 형제 결합자 *
- 일반 형제 결합자(General Sibiling Combinator)는 어떠한 선택자에 대한 형제를 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
  "어떠한 선택자" ~ "형제 선택자" {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }
- 아래 조건을 만족하는 경우 선택된다.
  1. 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
  2. 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.
* 인접 형제 결합자 *
- 인접 형제 결합자(Adjacent Sibiling Combinator)는 어떠한 선택자에 대한 인접한 형제를 선택하기 위해 사용하는 결합자이다.
- 다음과 같이 작성한다. ("는 없는 것으로 한다.)
  "어떠한 선택자" + "형제 선택자" {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }
- 아래 조건을 만족하는 경우 선택된다.
  1. 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
  2. 위 작성 예시에서 "형제 선택자"는 "어떠한 선택자"  바로 뒤에 와야한다.

 

'Front > HTML | CSS' 카테고리의 다른 글

[CSS,오류] Background-img url 경로가 안들어갈때  (2) 2023.02.07
[CSS] 선택자 모음  (0) 2023.01.31
[CSS] 속성 모음  (1) 2023.01.31
[CSS] 의사클래스 모음  (0) 2023.01.31
[HTML] HTML이란?  (1) 2023.01.30