リンクのリストがあり、タイトルが示すように、選択したリンクを除くすべてのリンクの不透明度を下げたいと考えています。したがって、All が選択されている場合、Links1、2、3 は淡色表示になります。Link1 が選択されている場合は、すべてのリンク、Link2、3 のリンクが淡色表示になります。
<nav class="primary">
<ul>
<li><a href="#" class="selected">All</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</nav>
CSS
nav.primary ul li a.selected {
color:#e2e2e2;
border-bottom: 1px solid #004672;
}
これは私が念頭に置いていたものですが、正しくないため機能しません(選択したものの不透明度も低下すると思います):
nav.primary ul li a.selected > nav.primary ul li a {
opacity:0.5;
}