Change the style of the first element on the list when introducing another element



  • Is it possible, with the help of css, to do that? When applied to one of the elements: text2, text3, text4, text1 changes the colour to the "wheat."

    .list {
      display: flex;
    }
    

    .item {
    margin-right: 15px;
    padding: 10px;
    background: wheat;
    }

    .item:first-child {
    background: #ccc;
    }

    .item:hover {
    background: #ccc;
    }

    <div class="list">
    <div class="item">text1</div>
    <div class="item">text2</div>
    <div class="item">text3</div>
    <div class="item">text4</div>
    </div>



  • Visually, it is possible to do so if the elements in the DOM are to be built back and applied flex-direction: row-reverse

    .list {
      display: flex;
      flex-direction: row-reverse;
      justify-content: start;
    }
    

    .item {
    margin-right: 15px;
    padding: 10px;
    background: wheat;
    }

    .item:last-child {
    background: #ccc;
    }
    .item:hover ~ .item:last-child {
    background: wheat;
    }

    <div class="list">
    <div class="item">text4</div>
    <div class="item">text3</div>
    <div class="item">text2</div>
    <div class="item">text1</div>
    </div>


Log in to reply
 

Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2