以下を使用して、div内の最後のulの最後のリンク(a)をターゲットにします。だからこれが頭に浮かんだことです:
#menu ul:last-child li a {
/*.....*/
}
その要素に手動でクラスを追加することはできません。動的に追加したい場合でも、上記の方法で要素をターゲットにする必要があります。
これが機能しない理由はありますか?
以下を使用して、div内の最後のulの最後のリンク(a)をターゲットにします。だからこれが頭に浮かんだことです:
#menu ul:last-child li a {
/*.....*/
}
その要素に手動でクラスを追加することはできません。動的に追加したい場合でも、上記の方法で要素をターゲットにする必要があります。
これが機能しない理由はありますか?
最後の ulに最後のリンクが必要な場合(リンクが - 要素内にあると仮定)、これはあなたが望むものです:li
#menu ul:last-child li:last-child a {
/*.....*/
}
#menu
メニュー要素を返します。ul:last-child
ul
内の最後のものを返します#menu
li:last-child
li
その中の最後のものを返しますul
試したことはありませんが、これでうまくいくと思います。
私はあなたのHTMLが何であるかを推測しているだけですが、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" >
div ul:last-child li:last-child a:last-child {
background-color: red;
}
</style>
</head>
<body>
<div>
<ul><li>First list</li></ul>
<ul><li>Second list</li></ul>
<ul>
<li>Item 1</li>
<li>
<a href="#">First Link</a>
<a href="#">Last Link</a>
</li>
</ul>
</div>
</body>
</html>
CSSlast-child
は、IE8 を含む IE では機能しません。
他のすべての現在のブラウザーで動作するはずですが、IE をサポートする必要があるサイトで使用する予定がある場合は、それを行う別の方法を考え出す必要があります。
このページには、CSS セレクターの完全なリストと、それらをサポートするブラウザーがあります: http://quirksmode.org/css/contents.html
コードを safari (4.0.3) と firefox (3.5.4) でテストしましたが、すべて正常に動作します。IE8 ではわかりません!
これは、CSS3 標準で定義された新しい疑似クラス (セレクター) であり、すべてのブラウザーで完全にサポートされているわけではなく、最も古いブラウザーではサポートされていないことを考慮してください!
原則として、パフォーマンス上の理由から、CSS ディレクティブは 2 つ以上のレベル (本当に必要な場合は最大 3 つ) を避けることをお勧めします!
ただし、スタイルをタグ付けされた要素に直接適用したくない場合は、javascript ソリューションを見つける必要があると思います!