liにclassを当てる場合の注意

2014年2月5日

とても簡単なことのハズが結構迷ってしまった。
きちんとcssを理解してないからだが。
liリストにクラスをあてて、アクティブなページのメニュー表示をハイライトしたい場合。

.exhibit-nav
{
float: right;
width: 500px;
height: 25px;
padding-right: 30px;
}
.exhibit-nav ul
{
float: right;
font-family: "ヒラギノ明朝 Pro W3","HG明朝E","MS P明朝","MS 明朝",serif;
font-size: 90%;
font-style: italic;
}
.exhibit-nav li,.exhibit-nav li a
{
float: left;
padding-left: 15px;
color: #666;
text-decoration: none;
}
.exhibit-nav li a:hover
{
color: #ccc;
text-decoration: none;
}
/*===========================================
↓ここ、単に.current-catでは反応なし。
属するクラスに紐付けするための.exhibit-navが必要。
===========================================*/
.exhibit-nav .current-cat a
{
color: #960002;
}

PAGE TOP