[csswg-drafts] Is ti correct for styling CSS to have the following ol list nesting? (#11485)

tomasts248 has just created a new issue for https://github.com/w3c/csswg-drafts:

== Is ti correct for styling CSS to have the following ol list nesting? ==
Hi,
long time ago I was suggested here: https://forum.freecodecamp.org/t/how-to-hover-with-css-sibling-item-in-nested-ordered-list-only/683864
to change the structure to make this CSS work:

```
#list .show-on-hover {
  opacity: 0;
  transition: opacity ease-in-out .25s;
}
#list li:hover > a:first-child + a + a {
    opacity: 1;
    transition: opacity ease-in-out .25s;
  }
```
The structure I had was this: 
```
<ol>
<li>
 <a class="hoverme" href="#">item 1</a>
 <a class=""></a>
 <a class="show-on-hover">
  <img src="">
 </a>
 <ol>
  <li>
   <a href="#" class="hoverme">item 1 nested</a>
   <a class=""></a>
   <a class="show-on-hover"><img src="" width="22"></a>
  </li>
  <li>
   <a href="#" class="hoverme">item 2 nested</a><a></a>
   <a class="show-on-hover"><img src="" width="22">
   </a>
  </li>
 </ol>
</li>
</ol>

```

But is valid to do this instead?:

```
<ol>
<li>
 <a class="hoverme" href="#">item 1</a>
 <a class=""></a>
 <a class="show-on-hover">
  <img src="">
 </a>
</li>

 <ol>
  <li>
   <a href="#" class="hoverme">item 1 nested</a>
   <a class=""></a>
   <a class="show-on-hover"><img src="" width="22"></a>
  </li>
  <li>
   <a href="#" class="hoverme">item 2 nested</a><a></a>
   <a class="show-on-hover"><img src="" width="22">
   </a>
                </li>
  
 </ol>

</ol>
```



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11485 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 13 January 2025 00:05:52 UTC