3
<div class="main">
 <div class="parent">
  <div class="content-1"> A </div>
 </div>
 <div class="content-2"> B </div>
</div>

On hover of content-1, I want to style content-2

kavandalal
  • 76
  • 4

2 Answers2

0

Well, I have found a solution for this, which I never used which is a ">" sign. I used Main for doing this, I used content-1 but it doesn't work for me, simce to me it act like then first-child and last-child or something like that. here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack13</title>

    <style>
        
        .main:hover > .content-2{
            background-color: red !important;
            color: blue !important;
        }


    </style>



</head>
<body>

<div class="main">
    <div class="parent">
        <div class="content-1"> A </div>
    </div>
    <div class="content-2"> B </div>
</div>


</body>
</html>


.main{
  border: 1px black solid;
}

.content-1{
  border: 1px blue solid;
}

.main:hover > .content-2{
    background-color: red !important;
    color: white !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack13</title>
</head>
<body>

<div class="main">
    <div class="parent">
        <div class="content-1"> A </div>
    </div>
    <div class="content-2"> B </div>    
</div>


</body>
</html>
AwatITWork
  • 550
  • 1
  • 5
  • 13
  • Make sure to explain that this will style .content-2 on hover of .main and all of its children rather than just .content-1 – Zach Jensz Mar 19 '22 at 11:31
  • Yes, but it is clear I think – AwatITWork Mar 19 '22 at 11:32
  • Also you can turn your code into a snippet with Ctrl+M or the snippet button in the editing toolbar so that people can run it with one click – Zach Jensz Mar 19 '22 at 11:32
  • Actually, I have targeted content-2, so only that will be affected. try it, I have edited the answer including Snippet. – AwatITWork Mar 19 '22 at 11:36
  • `On hover of content-1, I want to style content-2` Read it carefully :) – Zach Jensz Mar 19 '22 at 11:38
  • So, can you read my answer too carefully :), USED Main, I started with your answer but for me not working for Firefox and Chrome. so – AwatITWork Mar 19 '22 at 11:42
  • I'm not sure why my code isn't working for you. Please listen to the advice I am giving you, you have not answered the question accurately. – Zach Jensz Mar 19 '22 at 11:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243089/discussion-between-awatitwork-and-zach-jensz). – AwatITWork Mar 19 '22 at 11:52
0

It's currently impossible in CSS to style an element further UP the tree.

Hovever if you change your markup you can style the adjacent (next) sibling with the adjacent child selector + see below example

The code you have provided seems to contradict the title, as the title suggests styling a sibling where the code shows that the two are not siblings of the same parent.

.content-1:hover + .content-2 {
  background-color: yellow;
}
<div class="main">
  <div class="parent">
    <div class="content-1"> A </div>
    <div class="content-2"> B </div>
  </div>
</div>
Zach Jensz
  • 2,608
  • 3
  • 8
  • 23
  • please don't edit the OP's question I see why your code is working,
    A
    B
    you just pushed the B into Parent. I have asked kavandalal     – AwatITWork Mar 19 '22 at 11:52