2016-04-10 14 views
0

とのリンクをターゲットにしようとしています。私は "コンテンツ:前"と "最初の子供"の組み合わせを使用しようとしています。第三のリンクが機能していない、アイコンで「お問い合わせ」ターゲットは、各フォント-恐ろしいアイコンで各アクティブなリンクをターゲットにしようと独自のフォント素晴らしいアイコン

。多くの組み合わせを試しました。これも可能ですか? xDさん

.children.windowbg > a::first-child before{ 
 
    content: "\f114"; 
 
    font-family: fontawesome !important; 
 
    padding-right:5px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<td class="children windowbg" colspan="3"> 
 
\t \t \t \t \t \t \t <strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#">Contact Us</a>, <a href="#">Privacy policy</a> 
 
\t \t \t \t \t \t </td>

https://jsfiddle.net/rr78gfw1/

答えて

0

.windowbg a:nth-of-type(1):before{ 
 
    content: "\f114"; 
 
    font-family: fontawesome !important; 
 
    margin-left: -23px; 
 
    position :absolute; 
 
    color:red; 
 
    font-size:20px; 
 
} 
 

 
.windowbg a:nth-of-type(2):before{ 
 
    content: "\f115"; 
 
    font-family: fontawesome !important; 
 
    margin-left: -23px; 
 
    position :absolute; 
 
    color:red; 
 
    font-size:20px; 
 
} 
 

 
.windowbg a 
 
{ 
 
    margin-left:25px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="children windowbg" colspan="3"> 
 
\t \t \t \t \t \t \t <strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#">Contact Us</a>, <a href="#">Privacy policy</a> 
 
\t \t \t \t \t \t </div>

ためhereを参照してください彼らはDOM構造を変更するように依頼すると、ここで言及した解決策のいくつかは、純粋にCSSのソリューションではありません。

セレクタを正しく使用していないため、前には:がありません。Pとaは最初の子ではありません。nth-of-typeセレクタを使用してください。

tdのようなタグは、tableなしでは使用できません。デモは、tdをdivに置き換えたものです。このよう

.windowbg a:nth-of-type(1):before{ 
    content: "\f114"; 
    font-family: fontawesome !important; 
    margin-left: -23px; 
    position :absolute; 
    color:red; 
    font-size:20px; 
} 

フィドルリンク:https://jsfiddle.net/rr78gfw1/1/

+0

または ':first-of-type' – LarsW

+0

はい、どちらも@LarsW – Varun

+0

WOW! Varunありがとうございます! :Dこれは私が後にした解決策でした。なぜなら、HTMLをハードコーディングしたくないからです。それはCMSにリンクされていた、多くのPHPコーディングが必要です。だから、私はこのCSSメソッドが必要でした!これは美しくコード化されたCSSソリューションです。私はとても迷っていました。私は数多くの異なったものを試してみました。ありがとうございました! –

0

あなたのリンクにCLASSを与え、彼にフォントファミリだけ使用し、あなたのリンクにフォント素晴らしいアイコンを追加するために

.yourlink{ 
 
font-family: fantasy; 
 
    }
<td class="children windowbg" colspan="3"> 
 
\t \t \t \t \t \t \t <strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#" class="yourlink">Contact Us</a>, <a href="#">Privacy policy</a> 
 
\t \t \t \t \t \t </td>

0

を与えますタグはアンカータグの内側に<i class="fa fa-tags"></i>と表示されます。

<td class="children windowbg" colspan="3"> 
          <strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations<i class="fa fa-tags"></i></a>, <a href="#">Disclaimer<i class="fa fa-exclamation"></i></a>, <a href="#">Contact Us<i class="fa fa-phone"></i></a>, <a href="#">Privacy policy<i class="fa fa-info"></i></a> 
         </td> 

はデモ

0

他の回答が好ましい解決策を持っています。この1は、単にコードスニペットに:first-childよう

  • 擬似クラスのエラーを説明する代わりに、2つのうち、1つのコロンとしています。 (この場合)
  • :first-child選択.children.windowbgの最初の子だaタグ。選択しようとしているaタグは最初の子ではありませんが、最初の子はタイプです。したがって、:first-of-typeを使用する必要があります。
  • コロン(:before)を使用し、擬似要素を選択します。あなたはaタグのbeforeタグを選択しました。
  • のないtdタグは無効です。このコードはテストのためにtabletrというタグで囲みました。

.children.windowbg > a:first-of-type:before { 
 
    content: "\f114"; 
 
    font-family: fontawesome !important; 
 
    padding-right: 5px; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<table> 
 
    <tr> 
 
    <td class="children windowbg" colspan="3"> 
 
     <strong>SUB-FORUMS</strong>: <a href="#">Report Copyright Violations</a>, <a href="#">Disclaimer</a>, <a href="#">Contact Us</a>, <a href="#">Privacy policy</a> 
 
    </td> 
 
    </tr> 
 
</table>

あなたはリンクの順序を変更したり、1を追加するとき、あなたはCSSを変更する必要があるため(およびCSSが非のためではないので、他の回答が好ましく、ダイナミックスタイリング)。より良い解決策は、HTMLにアイコンを追加することです。

更新

は、それは通常、特定の親で、種類年代の最初の要素を選択することが:first-of-typeがあります。最後の子を選択するには、:last-of-typeを使用します。他の子を選択するには、:nth-of-type(n)を使用します。ここで、nは要素のインデックスです。最初の要素はインデックス1で、インデックス0ではありません。たとえば、3番目の要素を選択するには、:nth-of-type(3)を使用します。

しかし、nはこれに限定されない。 oddevenを使用して奇数と偶数の要素を選択することができ、nで計算できます。次に、nが任意の整数であるときに、答えになる可能性のあるインデックスを持つ要素を選択します。あなたは:nth-of-type(2n)使用する場合たとえば、:

Values for "n" | Indices 
---------------------------- 
     0  | 2 * 0 = 0 
     1  | 2 * 1 = 2 
     2  | 2 * 2 = 4 
     3  | 2 * 3 = 6 
     ...  | ... 

をこれには、すべて2の倍数である指数、でも要素を持つすべての要素を選択します。別の例は、:nth-of-type(3+n)です。

Values for "n" | Indices 
---------------------------- 
     0  | 3 + 0 = 3 
     1  | 3 + 1 = 4 
     2  | 3 + 2 = 5 
     3  | 3 + 3 = 6 
     ...  | ... 

これは、最初の2つを除くすべての要素を選択します。

Explanation from MDN

:first-child:last-child,:nth-child(n))と同じです。

+0

どこが間違っていたのか説明していただきありがとうございます。この回答のページは本当に重要で、1つの質問で多くの新しいことを学びました。ありがとうございました。 提案を使用して、3番目のa-linkを選択するにはどうすればいいですか? font-awsomeのアイコンの前に置く? –

+0

@JohnWisher私は答えを更新しました – LarsW

関連する問題