so woon!

[결합자] 일반 형제 결합자 (General Sibiling Combinator) 본문

CSS/개념정리

[결합자] 일반 형제 결합자 (General Sibiling Combinator)

xowoony 2022. 9. 6. 22:22

학습일 : 2022. 09. 05

일반 형제 결합자
일반 형제 결합자(General Sibiling Combinator)는 어떠한 선택자에 대한 형제를 선택하기 위해 사용하는 결합자이다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)

  "어떠한 선택자" ~ "형제 선택자" {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }


아래 조건을 만족하는 경우 선택된다.
  1. 위 작성 예시에서 "어떠한 선택자"와 "형제 선택자"는 같은 부모를 가져야한다.
  2. 위 작성 예시에서 "어떠한 선택자"보다 "형제 선택자"는 뒤에 와야한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>일반 형제 결합자</title>
    <style>
        body > div > i ~ a {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <b>주의 사항</b>
        <br>
        <a>1. 어쩌고</a>
        <br>
        <a>2. 저쩌고</a>
        <br>
        <a>3. 그렇고</a>
        <br>
        <br>
        <i>참고 사항</i>
        <br>
        <a>- 어쩌고</a>❤
        <br>
        <a>- 저쩌고</a>❤
        <br>
        <a>- 그렇고</a>❤
    </div>
</body>
</html>

=================실행결과==================

저작자표시 비영리 변경금지

'CSS > 개념정리' 카테고리의 다른 글

[속성] background-color 속성(Property)  (0) 2022.09.06
[결합자] 인접 형제 결합자 (Adjacent Sibiling Combinator)  (0) 2022.09.06
[결합자] 자손 결합자 (Descendant Combinator)  (0) 2022.09.06
[결합자] 자식 결합자 (Child Combinator)  (0) 2022.09.06
[선택자] 그룹 선택자 (Group Selector)  (0) 2022.09.06
'CSS/개념정리' Related Articles more
Comments