3


0

リンクを含まないliとは異なるリンクを含む形式li

私はそのようなリストを持っています:

 ...
 ...

ここで、両方のタイプのリスト要素が任意の順序で複数回存在します。 それらのliを異なる方法でフォーマットする方法はありますか? (異なるlist-style-image)唯一の違いは、1種類にはリンクが含まれ、もう1種類には含まれないことです。

5 Answer


6


いいえ、CSSには子要素に応じてセレクターを指定する方法はありません。

リンクを含むすべての li`要素のクラスのように、 li`要素自体を区別するために何かを追加する必要があります。

jQUeryを使用できる場合、アンカータグを含む `li`要素にクラスを追加できます。

$('li:has(a)').addClass('linkItem');

非jQueryソリューションは次のようになります。

var items = document.getElementsByTagName('LI');
for (var i=0; i 0) {
    items[i].className = 'linkItem';
  }
}


2


確かに。 それぞれ異なるliにクラスを与えると、簡単にできます。 または、クラスを使用できない場合はいつでもこれを行うことができます。

ul li
{
    styles....
}
ul li a
{
    styles....
}

最初のクラスのスタイルはすべてのli要素に適用され、2番目のクラスのスタイルはそれぞれ<a>タグに適用されます。


0


CSSだけでこれを行うことはできません。JavaScriptを使用してこれを実現できます。 http://jquery.com [jQuery]を使用した例を次に示します。

$('ul li a').each(function() {
  $(this).parent().css('list-style-image', 'url("/path/image.gif")');
});

これにより、aタグではなく、liタグのスタイルが設定されます。 技術的には、 `list-style-image`プロパティはliではなくulタグに設定されることになっていますが、ほとんどの(すべて?)ブラウザーは、liタグを個別にスタイルするときに期待する方法で処理します。


0


こんにちは

を追加します

このようなタグ:

 ...

次に、次のような2つの異なるスタイルを適用します。

ul a {display:block; padding:3em; background: #ccc;}
ul p {display:block; padding:3em; background: #aaa;}

このためにJavaScriptを使用することはお勧めしません。JavaScriptをブロックする人もいます。 しかし、それは依存します。 私はcss / htmlを好むでしょう。

*編集:*何らかの理由で、「

コードを作成せずに-修正

また、list-style-imageを適用したいことを見落としているかもしれませんが、これは機能しません。


0


これがクラスの目的です。 HTMLでは:

 ...
 ...

およびCSS

ul li {...}
ul li.linked {...}