淘先锋技术网

首页 1 2 3 4 5 6 7

有没有一个& quot上一个兄弟& quot选择器？

加号选择器(+)用于选择下一个相邻的兄弟。

前一个兄弟姐妹有对等的吗？

不，没有“上一个兄弟姐妹”选择器。

与此相关的一点是，~代表一般的后继兄弟元素(意味着元素在这个元素之后，但不一定紧接在这个元素之后),是一个CSS3选择器。+代表下一个兄弟，是CSS2.1。

请参见第3级选择器中的相邻兄弟组合符和级联样式表第2级修订版1 (CSS 2.1)规范中的5.7相邻兄弟选择器。

我找到了一种方法来设计所有以前的兄弟姐妹(与~)的样式，这可能会根据您的需要而工作。

假设你有一个链接列表，当鼠标停留在一个链接上时，所有之前的链接都会变成红色。你可以这样做:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

选择者四级提出:has()(之前是主语指示！)有一天，它将允许您选择以前的兄弟姐妹:

previous:has(+ next) {}

或者(对于一般的前一个兄弟姐妹而不是相邻的兄弟姐妹):

previous:has(~ next) {}

在撰写本文时:has{}被大多数但不是所有主流浏览器支持。支持正在改善。

多年来这个答案已经吸引了几十个& quot它仍然不被支持& quot评论(现已删除)。请不要再加了。答案中有一个定期更新的浏览器支持图表的链接。

在下面的例子中，我将把重点放在flexbox上，但是同样的概念也适用于网格。

使用flexbox，可以模拟以前的兄弟选择器。

特别是，flex order属性可以在屏幕上移动元素。

这里有一个例子:

当元素B被悬停时，您希望元素A变成红色。

<ul>
    <li>A</li>
    <li>B</li>
</ul>

步伐

使ul成为灵活的容器。

ul { display: flex; }

反转同级在标记中的顺序。

<ul>
   <li>B</li>
   <li>A</li>
</ul>

使用同级选择器来定位元素A (~或+都可以)。

li:hover + li { background-color: red; }

使用flex order属性恢复可视显示上同级的顺序。

li:last-child { order: -1; }

...瞧！一个先前的兄弟选择器就诞生了(或者至少是模拟的)。

以下是完整的代码:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

<ul>
    <li>B</li>
    <li>A</li>
</ul>

我也有同样的问题，但后来我有一个“咄”的时刻。而不是写作

x ~ y

写

y ~ x

显然这匹配“x”而不是“y”，但是它回答了“有匹配吗？”问题，简单的DOM遍历可能比javascript中的循环更有效地找到正确的元素。

我意识到原来的问题是一个CSS问题，所以这个答案可能完全不相关，但是其他Javascript用户可能像我一样通过搜索偶然发现这个问题。

没有& quot上一个选择器& quot，但是可以用:not和~(& quot；在选择器& quot).没有逆序，没有javascript。

.parent a{
  color: blue
}

.parent a.active{
  color: red
}

.parent a:not(.parent a.active ~ a){
  color: red
}

<div class="parent">
  <a href="">link</a>
  <a href="">link</a>
  <a href="" class="active">link</a>
  <a href="">link</a>
  <a href="">link</a>
</div>

三招: 基本上，颠倒HTML中元素的HTML顺序， 并使用~ Next siblings运算符:

1.使用CSS Flex和行反转

.reverse {
  display: inline-flex;
  flex-direction: row-reverse;
}
.reverse span:hover ~ span { /* On SPAN hover target its "previous" elements */
  background:gold;
}

Hover a SPAN and see the previous elements being styled!<br>

<div class="reverse">
  <!-- Reverse the order of inner elements -->
  <span>5</span>
  <span>4</span>
  <span>3</span>
  <span>2</span>
  <span>1</span>
</div>

+代表下一个兄弟姐妹。有没有与前面的对等词 兄弟姐妹？

您可以使用两个斧头选择器:！然后呢。 在传统的CSS中有两个后续的兄弟选择器:

+是紧接其后的同级选择器 ~是任何后续同级选择器 在传统的CSS中，没有前一个兄弟选择器。

然而，在axe CSS后处理器库中，有两个以前的同级选择器:

？是上一个同级选择器(与+相反) ！是任何上一个同级选择器(与~相反) 工作示例:

在下面的示例中:

。any-successful:hover ~ div选择任何后续的div 。立即-后续:hover + div选择紧接的后续div 。any-previous:悬停！div选择任何以前的div 。立即-先前:悬停？div选择上一个div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

您可以使用HTML中元素的逆序。那么除了像Michael_B的回答中那样使用order之外，你还可以使用flex-direction:row-reverse；或flex-方向:列-反向；取决于你的布局。

工作样本:

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

目前还没有官方的方法可以做到这一点，但是你可以用一个小技巧来达到这个目的！请记住，这是实验性的，有一定的局限性... (如果您担心navigator兼容性，请查看此链接)

您可以使用CSS3选择器:名为nth-child()的伪类

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

你可以使用双重否定

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

用标记或替换选择器。类(使用#ID可能过于具体)。 替换过滤器与一些其他:pseudo-SELECTOR(我只试过:悬停)或。类(更多用于切换Javascript)。

因为典型的用法可能依赖于悬停(见下面的例子)

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}

/* Solution */
div.parent:hover > div.child:not(:hover):not(:hover ~ .child)  {
    background-color:red;
    border-radius:1.5em;
}
div.parent:hover > div.child:not(:hover):not(:hover ~ .child) > div {
    background-color:yellow;
}

/* Make pretty (kinda) */
div.parent {
  width:9em;
  height:9em;
  /* Layout */
  display:grid;
  grid-template-columns : auto auto auto;
  grid-template-rows : auto auto auto;
}
div.child {
  /* Dimensions */
  height:3em;
  width:3em;
  /* Layout */
  position:relative;
  /* Cursor */
  cursor: pointer;
  /* Presentation */
  border: 1px black solid;
  border-radius:1.5em;
}
.star {
  /* Dimensions */
  width: 2.5em;
  height: 2.5em;
  /* Placement */
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  /* Geometry */
  -webkit-clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  clip-path: polygon(
    50% 0%,
    63% 38%,
    100% 38%,
    69% 59%,
    82% 100%,
    50% 75%,
    18% 100%,
    31% 59%,
    0% 38%,
    37% 38%
  );
  /* Presentation */
  background-color: lightgrey;
}
div.child:hover {
    /* Presentation */
    background-color:yellow;
    border-radius:1.5em;
}
div.child:hover > div.star {
    /* Presentation */
    background-color:red;
}

<div class="parent">
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
  <div class="child" href="#"><div class="star"></div></div>
 </div>

在悬停时覆盖下一个同级的样式，这样看起来好像只有前一个同级在悬停时添加了样式。

ul li {
  color: red;
}

ul:hover li {
  color: blue;
}

ul:hover li:hover ~ li{
  color: red;
}

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

我的要求是在@Quentin的答案“我选择了前两个兄弟姐妹”的帮助下，选择当前悬停项目的前两个兄弟姐妹。

.child{
  width: 25px;
  height: 25px;
}

.child:hover {
    background:blue;
}

 .child:has( + .child:hover) {
  background: yellow;
}

.child:has(+ .child + .child:hover){
  background:green;
}

.child:hover + .child {
  background: red;
}

.child:hover + .child + .child {
  background: magenta;
}

<ul class="parent">
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
  <li class="child"></li>
</ul>

如果您知道确切的位置，那么基于:n-child()的对所有后续兄弟的排除将会起作用。

ul li:not(:nth-child(n+3))

这将选择3日之前的所有lis(例如1日和2日)。但是，在我看来，这看起来很丑，而且用例非常紧凑。

您也可以从右到左选择第n个子节点:

ul li:nth-child(-n+2)

这也是一样的。

不，通过CSS是不可能的。它把“瀑布”放在心上；-).

然而，如果您能够将JavaScript添加到页面中，那么一点点jQuery就可以让您达到最终目标。 您可以使用jQuery的find对您的目标元素/类/id执行“前瞻”,然后回溯以选择您的目标。 然后使用jQuery重写元素的DOM (CSS)。

根据迈克·布兰特的回答， 下面的jQuery代码片段可能会有所帮助。

$('p + ul').prev('p')

这首先选择所有& ltul & gt紧跟在a & ltp & gt。 然后它“回溯”选择所有以前的& ltp & gt从& ltul & gt南

实际上，已经通过jQuery选择了“前一个兄弟”。 现在使用。函数为该元素传递新的css值。

在我的例子中，我希望找到一种方法来选择id为#full-width的DIV，但前提是它有一个类为. companies的(间接)后代DIV。

我控制了所有的HTML。公司，但不能改变它上面的任何HTML。 瀑布只有一个方向:向下。

因此，我可以选择所有#全角。 或者我可以选择。只遵循#全角的公司。 但我不能只选择#全角公司。

我又一次无法补充。HTML中更高层次的公司。HTML的这一部分是外部编写的，包装了我们的代码。

但是使用jQuery，我可以选择所需的#全角，然后分配适当的样式:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

这将查找所有#全角。公司，并且只选择那些。公司，类似于CSS中使用选择器来定位标准中的特定元素。 然后它使用。“回溯”并选择。公司， 但是会过滤这些结果，只保留#fill-width元素，所以最后， 如果它有一个. companies类后代，它只选择一个#全角元素。 最后，它给结果元素分配一个新的CSS (width)值。

$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");

div {
  background-color: lightblue;
  width: 120px;
  height: 40px;
  border: 1px solid gray;
  padding: 5px;
}
.wrapper {
  background-color: blue;
  width: 250px;
  height: 165px;
}
.parent {
  background-color: green;
  width: 200px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">

  <div class="parent">
    "parent" turns red
    <div class="change-parent">
    descendant: "change-parent"
    </div>
  </div>
  
  <div class="parent">
    "parent" stays green
    <div class="nope">
    descendant: "nope"
    </div>
  </div>
  
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>

根据您的具体目标，有一种方法可以在不使用父选择器的情况下实现父选择器的有用性(即使存在父选择器)...

假设我们有:

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们可以做些什么来利用间距让袜子区块(包括袜子颜色)在视觉上突出？

什么会很好但不存在:

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在什么:

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这会将所有锚链接的顶部设置为15px，对于LIs中没有UL元素(或其他标签)的链接，会将其重置回0。

/* Add a style to all the children, then undo the style to the target 
and sibling children of your target. */

ul>li {
  color: red;
}

ul>li.target,
ul>li.target~li {
  color: inherit;
}

<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

我找到了最简单的解决方法。它可能只适用于你正在做的事情。

假设你想停留在& quot同胞_ 2 & quot改变& quot同胞_ 1 & quot在下面的示例中:

<div class='parent'>
  <div class='sibling_1'></div>
  <div class='sibling_2'></div>
</div>

不幸的是，没有“前一个”兄弟选择器，但是你仍然可以通过使用定位(例如右浮动)获得相同的效果。这取决于你想做什么。

在我的情况下，我想要一个主要的CSS 5星评级系统。我需要颜色(或交换图标)以前的明星。通过将每个元素向右浮动，我基本上得到了相同的效果(因此星星的html必须‘向后’写)。

我在这个例子中使用了FontAwesome，并在fa-star-o和fa-star的unicodes之间进行了交换 http://fortawesome.github.io/Font-Awesome/

CSS:

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* set all stars to 'empty star' */
.stars-container {
    display: inline-block;      
}   

/* set all stars to 'empty star' */
.stars-container .star {
    float: right;
    display: inline-block;
    padding: 2px;
    color: orange;
    cursor: pointer;

}

.stars-container .star:before {
    content: "\f006"; /* fontAwesome empty star code */
}

/* set hovered star to 'filled star' */
.star:hover:before{
    content: "\f005"; /* fontAwesome filled star code */
}

/* set all stars after hovered to'filled star' 
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
    content: "\f005"; /* fontAwesome filled star code */
}

HTML: (40)

http://jsfiddle.net/andrewleyva/88j0105g/

没有，也有。

如果你必须把标签放在输入之前，只需把标签放在输入之后，同时保留标签& ampdiv内的输入，并按如下方式设置div的样式:

.input-box {
  display: flex;
  flex-direction: column-reverse;
}

<div class="input-box">
  <input
   id="email"
   class="form-item"           
   />

   <label for="email" class="form-item-header">                  
   E-Mail*                  
   </label>
</div>

我需要一个解决方案来选择前一个兄弟tr。我用React和Styled-components想出了这个解决方案。这不是我的精确解(这是几小时后的记忆)。我知道setHighlighterRow函数有一个缺陷。

OnMouseOver将行索引设置为state，并用新的背景色重新呈现前一行

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

没有这样的选择器，但是在DOM API中有一个漂亮的只读属性

Node.previousSibling同级

我通过将元素放入flexbox中，然后使用flex-direction: column-reverse解决了这个问题。

然后，我必须手动反转HTML中的元素(将它们按相反的顺序放置)，看起来很正常，而且工作正常！

<div style="display: flex; flex-direction: column-reverse">
  <a class="element2">Element 2</a>
  <a class="element1">Element 1</a>
</div>
...
<style>
  .element2:hover + element1 {
    ...
  }
</style>

可以使用:has()如下。

.thePrevious:has(+ .theNextSibling)

我用它来修复重叠的引导模式，如下所示。如果有多个模态，任何以前的模态都将被隐藏。

.modal.show.modal--open:has(~ .modal.show.modal--open){
   opacity: 0;
 }

实际上没有选择器可以选择css中的前一个兄弟。但是使用某些技巧是可能的。 例如，当您将鼠标悬停在任何元素上时，如果您想要更改前一个元素的样式，您可以使用:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .element:has(+ .next-element:hover){
      /* here your style for .element */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element"></div>
    <div class="next-element"></div>
  </div>
</body>
</html>

在这种情况下如果你悬停在。的样式。元素将按照您上面的定义进行更改

2023年，事情发生了变化。现在有了这样的选择器:

// 1 item before
    :has(+ .item:hover) {
        ...
    }

如果你想选择前3个项目，你这样做:

// 3 items before
    :has(+ .item:hover),
    :has(+ .item + .item:hover),
    :has(+ .item + .item + .item:hover) {
        ...
    }

在这里看我的演示https://codepen.io/ro31337/pen/YzJbEZv

我也遇到过类似的问题，并且发现这种性质的所有问题都可以通过以下方式解决:

给你所有的物品一个风格。 为您选择的项目指定一种样式。 使用+或~为下一个项目指定样式。 通过这种方式，您可以设置当前项目、上一个项目(所有项目都被当前项目和下一个项目覆盖)和下一个项目的样式。

示例:

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

希望对某人有帮助。

这是一个类似问题的链接

CSS选择所有以前的兄弟姐妹进行星级评定

所以我把我的解决方案贴了出来，使用了每个人的回复，任何人都可以把它作为参考，并可能提出改进建议。

// Just to check input value
// Consts
const starRadios = document.querySelectorAll('input[name="rating"]');

// EventListeners
starRadios.forEach((radio) => radio.addEventListener('change', getStarRadioValue));

// Get star radio value
function getStarRadioValue(event) { 
    alert(event.target.value) 
    // Do something with it
};

.star-rating {
  font-size: 1.5rem;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
}
.star-rating.editable label:hover {
  cursor: pointer;
}
.star-rating.editable .icon-star:hover,
.star-rating.editable .icon-star:hover ~ .icon-star {
  background-color: #fb2727 !important;
}

.icon-star {
  position: relative;
  background-color: #72747d;
  width: 32px;
  height: 32px;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.icon-star.filled {
  background-color: #fb2727;
}

.icon-star > label {
  display: inline-block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.icon-star > label > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(50%) translateX(50%);
  display: none;
}

<div class="star-rating editable">
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="5" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="4" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="3" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating" value="2" />
    </label>
  </span>
  <span class="icon-star">
    <label>
      <input type="radio" name="rating"  value="1" />
    </label>
  </span>
</div>

对于我的用例需要改变以前的元素风格的焦点和悬停只有2个项目在父元素。为此使用了:focus-within和:hover伪类。

比如每当焦点/悬停事件发生时进行选择

.root-element:hover .element-to-style { background-color: red;} 
.root-element:focus-within .element-to-style { background-color: green;}

<div class="root-element">
<span class="element-to-style"> TextFocused</span>
<input type="text" placeholder="type To Style"/>

</div>

这是我的工作解决方案，只使用CSS来获得金星(在这种情况下特别是SCSS)

我在一个容器div里有5个灰色的星星 在容器div的悬停上，我将所有的星星变成金色 当悬停在特定的星星上时，我将所有后继的兄弟姐妹划分为灰色 下面是细长的代码(但可以很容易地转换成HTML)

<button id="review">
        <div id="star-container">
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
          <div><Fa icon="{faStar}" /></div>
        </div>
</button>

<style lang="scss">
  #review {
    color: $cool-gray;
    #star-container {
      display: flex;
      &:hover {
        color: $custom-gold;
      }
      div {
        &:hover ~ div {
          color: $cool-gray;
        }
      }
    }
  }
</style>