最後のA要素を条件付きでターゲットにする

Question

最後の<a>要素をターゲットにする必要がありますが、いくつかの条件付きでターゲットを設定する必要があります。 この場合、テキストはCMSを使用して作成されます。これにより、クラスを追加するオプションが制限されます。私はjsfiddleを作成して私の問題を示しました。最後の<a>は、そのフォントに素晴らしいフォントを持っていなければなりません。:afterもう1つは<a>です。 :last-child aのようなものは使用できません。ユーザー/テキストライターはデフォルトでリンクを書く必要がないからです。最初の後に別の段落の可能性もあります。何もデフォルトはありませんが、最後の<a>要素は、実際のテキストを含む段落から離れていて、アイコンを持っている必要があります。

これはちょっと説明するのは難しいですが、jsfiddle自体が説明されますので一見してください。 CSSソリューションがあればうれしいでしょう。そうでなければjQueryは2番目に来る。

ありがとうございます！

Answer 1

私が知る限り、それだけではCSSを使用することはできません。

どのようにJavaScriptの程度：

var element = document.getElementsByTagName("a"); 
for(var i=0; i < element.length; i++) { 
    var el = element[i] 
    var x = el.parentNode.innerText.length; 
    var y = el.innerText.length 
    if (x === y) { 
     el.classList.add('icon'); 
    } 
} 

CSS：

.icon::after{ 
    content: "\f105"; 
    margin-left:5px; 
    font-family: FontAwesome; 
    background-color: transparent; 
} 

それは親要素内のテキストとインラインで包まれていないすべての<a>要素に.iconクラスを追加します。

Answer 2

最後のpタグをターゲティングできます。

p:last-of-type a::after{ 
    content: "\f105"; 
    margin-left:5px; 
    font-family: FontAwesome; 
    background-color: transparent; 
}