[CSS/SCSS] 현재 선택자 &(&. &: &::) 그리고 & + &

📍 & (현재 선택자)

현재 선택자를 그대로 참조하며, 다른 선택자나 규칙과 결합할 때 사용.

• & 예제

  • &.highlight
    현재 선택자인 .card에 highlight 클래스가 추가된 경우를 스타일링함.

  • &__title
    현재 선택자인 .card 그러니까 카드 title에 스타일링함.

    .card {
     color: black;
    
     &.highlight {
       background-color: yellow;
     }
    
     &__title {
       font-size: 1.5rem;
     }
    }
    

---

📍 &. (현재 선택자 + 클래스 결합)

&.는 현재 선택자에 특정 클래스를 추가함.
현재 선택자에 다른 클래스 선택자를 결합한다는 이야기!

• &. 예제
  • &.active
    현재 선택자인 .button에 active 클래스가 추가된 경우를 스타일링함.

.button {
  color: black;

  &.active {
    color: red;
  }
}

---

📍 &: (현재 선택자 + 가상 클래스)

&:는 현재 선택자에 가상 클래스를 추가함.
가상 클래스는 HTML 요소의 상태나 위치에 따라 스타일을 동적으로 변경하는 데 사용됨.

• &: 예제

  • &:hover
    현재 선택자인 .link에 마우스를 올렸을 때.

  • &:nth-child(odd)
    현재 선택자의 홀수 번째 요소에 스타일 적용.

.link {
  color: blue;

  &:hover {
    text-decoration: underline;
  }

  &:nth-child(odd) {
    background-color: #f0f0f0;
  }
}

---

📍 &:: (현재 선택자 + 가상 요소)

&::는 현재 선택자에 가상 요소를 추가

• &:: 예제

  • &::before
    현재 선택자인 .box의 앞에 특정 콘텐츠를 추가.

  • &::after
    현재 선택자인 .box의 뒤에 특정 콘텐츠를 추가.

.box {
  background: lightgray;

  &::before {
    content: '● ';
    color: red;
  }

  &::after {
    content: ' ★';
    color: gold;
  }
}

<!-- HTML 구조 -->
<div class="box">콘텐츠</div>

화면에 나다타는 내용 ===> ● 콘텐츠 ★

---

📍 & + &

현재 선택자 바로 뒤에 오는 동일한 선택자를 의미함. 즉, 두 개의 동일한 요소가 연달아 있을 때, 뒤의 요소에만 스타일을 적용할 수 있음. 여기서 +는 인접 형제 결합자임!

✔ & : 현재 선택자
✔ + : 인접 형제 결합자로 동일한 부모를 가지며, 특정 요소 바로 뒤에 오는 형제를 선택함.
✔ & + & : 현재 선택자 바로 뒤에 동일한 선택자가 있을 때 스타일을 적용함.

• &+& 예제 1

  • .item
    기본 스타일로 모든 .item 요소의 텍스트 색상이 검정색.

  • & + & (CSS로 컴파일하면 .item + .item 임!)
    첫 번째 .item 바로 뒤에 다른 .item이 있으면, 그 두 번째 .item에만 스타일을 적용.
    첫 번재 .item에는 적용되지 않음.

// 첫 번째 .item은 color: black;만 적용됨
.item {
  color: black;

// 두 번째 아이템은 color: black; + margin-top: 10px; + border-top: 1px solid #ccc; 적용
  & + & {
    margin-top: 10px;
    border-top: 1px solid #ccc;
  }
}

• &+&+& 예제 2

.item(1) {
  color: black;

// .item(1) + .item(2)
  & + & {
    margin-top: 10px;
    border-top: 1px solid #ccc;
  }
  
//.item(1) + .item(2) + .item(3)
  & + & + & {
    font-weight: bold;
  }
}

<div class="item">첫 번째</div> <!-- color: black; -->
<div class="item">두 번째</div> <!-- color: black; + margin-top: 10px; + border-top: 1px solid #ccc; -->
<div class="item">세 번째</div> <!-- color: black; + margin-top: 10px; + border-top: 1px solid #ccc; + font-weight: bold; -->
<div class="item">네 번째</div> <!-- color: black; + margin-top: 10px; + border-top: 1px solid #ccc; -->
<div class="item">다섯 번째</div>

(+) 😆 퀴즈!!!
다섯 번째 item은 어떻게 스타일이 적용될까?

정답은 드래그해서 확인
=> color: black; + margin-top: 10px; + border-top: 1px solid #ccc;
+&은 바로 뒤에 오는 선택자에만 적용된다. 그래서 네 번째 item에서도 & + & + &의 font-weight: bold;가 적용되지 않았던 것! 그래서 다섯 번째 item에서도 & + &까지만 적용되어 font-weight: bold;는 적용되지 않는 것!!!