用于获取最后一个可见元素的CSS选择器

Question

我有一个按钮列表，其中第一个和最后一个可见按钮应该具有特殊样式（例如，圆角）。捕捉是一些按钮被隐藏，所以我不能简单地使用:last-child伪类。

这是我的HTML：

<div class="btn-group">
    <a class="btn hide">one</a>
    <a class="btn">two</a>
    <a class="btn">three</a>
    <a class="btn">four</a>
    <a class="btn hide">five</a>
</div>

CSS（使用LESS）选择器不起作用：

.btn:not(.hide):first-child {
    border-radius: 3px 0 0 3px;
}

.btn:not(.hide):last-child {
    border-radius: 0 3px 3px 0;
}

最终目标是将特殊样式应用于第二个和第四个按钮。此外，这只需要在Chrome中运行。我知道这可以通过jQuery选择器来完成，但我宁愿在我的样式表中处理它。