CODEWITHSUNDEEP
csscss-selectorsborderpseudo-element
Kraken
Kraken

Reputation: 5860

class, adjacent sibling, and pseudo selectors not working together

This is regarding a list and the double border effect of side by side selected and hovered elements, as pictured here.

example of adjacent border style Back in the day we called it border collapse because we were using table elements.

Here is the CSS which adds the border (which comes before the next lines in the stylesheet):

li.selected, li:hover { border: green 1px solid; border-radius: 1px; }

I got it working when the hover follows the selected list item:

li.selected + li:hover { border-top: 1px solid transparent; }

but this rule for some reason does not apply when the selected item follows the hover:

li:hover + li.selected { border-top: 1px solid transparent; }

The idea of these rules are simply that if they appear next to each other, make the top border of the second item transparent.

I checked and it is not being overwritten anywhere, and the two lis are definitely adjacent siblings. This does not work on firefox or chrome.

Does anyone know of any conflicts with using all of these selectors together?

Please let me know if I can add anything else to the post to get a good answer.

Upvotes: 0

Views: 426

Answers (1)

Banzay
Banzay

Reputation: 9470

You need to set transparent border as default for li.

li.selected, li:hover {
    border: green 1px solid;
    border-radius: 1px;
}

li {
    border: transparent 1px solid;
}

li.selected + li:hover, li:hover + li.selected {
    border-top: 1px solid transparent
}
<ul>
 <li>dfsafasf</li>
 <li class="selected">dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
 <li>dfsafasf</li>
</ul>

Upvotes: 1

Related Questions