ドキュメント全体の最初の要素を一致させますか？

私はドキュメント全体の最初のH1要素に一致させたいと思います。しかし、今私は問題に直面しています。ドキュメント全体の最初の要素を一致させますか？

h1:first-child { 
... 
}

しかし、それはページ上のいくつかのH1タグと一致します。

私は、次のCSSセレクタを使用しています。どのように最初のものにマッチさせることができますか？

出典

2012-02-24 Mathias Lykkegaard Lorenzen

HTMLを表示できますか？ http://jsfiddle.net/のデモも役に立ちます。最も可能性の高い答えは '#containingElement> h1：first-child'です。 – thirtydot

Chromeのhttp://jsfiddle.net/C2r2R/でうまく動作します。親divがない場合、 'body> h1：first-child {}'を試してみてください。 – ngen

@ngenしかし、もしあなたが他の 'div'の中に' h1'をネストしていれば、それらの 'div'sの' first-child'ともみなされ、CSS規則がそれらに適用されます – JFK

あなたはjQueryを使ってカンニングすることができますか？いくつかの時間jQuery（javascript）はhtmlやCSSの制限を超えてエレガントな選択肢を提供します

$(document).ready(function() { 
$('body').find('h1:first').css('color','#0000ff'); 
}); // ready

出典

2012-02-24 23:26:31 JFK

私はなぜこれが一度投票されたのか分からない。それは私の解決に終わった。本当にありがとう。 –

@マティアス：おそらく、ソリューションが完全に有効であるにもかかわらず、質問がjQueryソリューションを要求していなかったためです。 – animuson

私はこれを代替ソリューションとして提供しました。なぜなら、誰かが間違っていない限り、「css-only」可能な解決策は存在しないように思われるからです。結局のところ、ここで重要なことは、上向き投票か下向き投票に関係なく、手助けすることです。私はあなたのために働いてうれしいです。ありがとう。 – JFK

これは、セレクタがドキュメント全体を見ているため、親を見ているからです。 <h1>がの最初の子である場合は、いつでも要素となり、そのセレクタに一致します。ドキュメント内の単一の<h1>にのみ適用する場合は、別のクラスまたはIDを指定するか、または表示する場所に基づいてより具体的に選択することを検討してください。

たとえば、自分のサイトでは、ドキュメントの各塊を<div class="box">に分割します。これらはすべてドキュメントの<body>にあります。だから私は文書で唯一の最初の<h1>にマッチしたい場合、私はこのような何かを行うことができます：

body > .box:first-child > h1:first-of-type { }

これが唯一の最初のボックスを選択し、そのボックス内の最初の<h1>と一致し、シミュレートします最初のボックスに<h1>があると仮定すると、私のウェブサイトには常に存在します）。ドキュメント内の最初の<h1>が必ずしも親の最初の子である必要はないので、ここで:first-of-typeセレクタを使用したいとします。

出典

2012-02-24 23:09:53 animuson

あなたのセレクタは必要以上に複雑です。私の答えを見てください。 – ScottS

貴殿の免責事項を踏まえて私の回答を削除しました。 – ScottS

このようなセレクタはありません。 all available selectorsは、複数の親にまたがる同じ名前の要素の順序ではなく、兄弟とのみ一致できます。あなたのセレクターはとにかく非常に脆いでしょう。

代わりに、最初のh1に適切なクラスをマークアップするか、その構造に一致させるだけです。たとえば、代わりに

body>header:first-child>h1

と一致させることができます。

出典

2012-02-24 23:10:23 phihag

余分なクラスは必要ありません、私の答えを見てください。 – ScottS

回答が[間違っている]（http://jsfiddle.net/PwSVN/）;） – phihag

あなたの控えめな証拠から私の回答を削除しました。 – ScottS

これは、その直接の親の最初の子であるすべてのh1と一致します。だからあなたが好きならば

<div> 
    <h1></h1> 
</div> 
<div> 
    <h1></h1> 
</div>

これらのh1タグはどちらも第1子です。

H1を試してみてください：最初の

出典

2012-02-24 23:11:04

待って、それは仕事をしませんでした。 –

'h1：first'とは何ですか？ '：first 'はCSSセレクタではありません... – animuson

.. [jQueryセレクタ]（http://api.jquery.com/first-selector/）です。 – thirtydot

ドキュメント全体の最初の要素を一致させますか？

答えて

関連する問題