Ý nghĩa của ký tự '+' trong SCSS

[Le_Quy_Nguyen (Lê Quý Nguyên)]

Mình có một đoạn scss như thế này:

.slider-item {
  position: relative;
  transform: scale(.9);
  transform-origin: center right;
  transition: .25s transform;

  img {
    width: 100%;
  }

  &.slick-current,
  &.slick-center {
    transform: scale(1);
    transform-origin: center center;
    transition: .25s transform;
    z-index: 3;

    + .slider-item {
      transform-origin: center left;
      left: -50px;
    }
  }
}

Mình không hiểu ý nghĩa của + trong trường hợp này, mọi người có ai biết thì chỉ hộ mình. Cảm ơn!

[hungaya (Hung)]

SCSS là preprocessor, đoạn code liên quan đến + của em sau khi biên dịch ra CSS như thế này

.slider-item.slick-current + .slider-item,
.slider-item.slick-center + .slider-item {
  transform-origin: center left;
  left: -50px;
}

Dấu + mà em hỏi là 1 trong các cách của CSS selector, gọi là adjacent sibling combinator. Cú pháp nó như sau:

element1 + element2 {
 ...
}

Khi đó tất cả element2 đứng kế bên trực tiếp theo sau element1 được chọn.

Ví dụ sau #item2 được chọn nhưng #item3 không được chọn:

<div class="parent">
  <div class="child" id="item1">First item</div>
  <div class="child" id="item2">Second item</div>
  <div class="child" id="item3">Third item</div>
</div>

#item1 + .child {
  color: #eee;
}

Nếu thêm 1 item giữa #item1 và #item2 thì sẽ không có item nào được chọn. Vì + chỉ lấy phần tử liền kề trực tiếp

<div class="parent">
  <div class="child" id="item1">First item</div>
  <div class="another-child" id="another-item">another item</div>
  <div class="child" id="item2">Second item</div>
  <div class="child" id="item3">Third item</div>
</div>