[CSS] 결합자(combiner)

고근호·2023년 9월 8일
post-thumbnail

결합자

자식 결합자

  • 자식 결합자(Child Combinator)는 어떠한 부모 선택자에 대한 자식을 선택하기 위해 사용하는 결합자이다.
  • 다음과 같이 작성한다.("는 없는 것으로 한다.)
    "어떠한 부모 선택자" > "자식 선택자" {
    "속성" : "속성 값";
    "속성" : "속성 값";
    "속성" : "속성 값";
    }
자식 결합자
Hi!
내가 빨간색임

자손 결합자

  • 자손 결합자(Descendant Combinator)는 어떠한 부모 선택자에 대한 자손을 선택하기 위해 사용하는 결합자이다.
  • 다음과 같이 작성한다.("는 없는 것으로 한다.)
    "어떠한 부모 선택자" "자손 선택자" {
    "속성" : "속성 값";
    "속성" : "속성 값";
    "속성" : "속성 값";
    }
자손 결합자
Hi!
내가 빨간색임

일반 형제 결합자

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

인접 형제 결합자

  • 인접 형제 결합자(Adjacent Sibiling Combinator)는 어떠한 선택자에 대한 인접한 형제를 선택하기 위해 사용하는 결합자이다.
  • 다음과 같이 작성한다.("는 없는 것으로 한다.)
    "어떠한 선택자" + "형제 선택자" {
    "속성" : "속성 값";
    "속성" : "속성 값";
    "속성" : "속성 값";
    }
  • 아래 조건을 만족하는 경우 선택한다.
    • 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
    • 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.
인접 형제 결합자
profile
rootgo 매일, 꾸준히 성장하는 사람🌱

0개의 댓글