データ属性の最初の要素を選択

Question

data-result="INVALID"を含む段落<p>の最初の一致をCSSを使用して選択したいと考えています。

私はこの小さなスクリプトを何も成功させずに試しました。要素が選択されません。

私はこの解決策（jQueryはありません）ではcssのみに限定されています。この問題の解決策はありますか？

p[data-result="INVALID"]:first-of-type { 
 
    color: red; 
 
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> 
 

 

 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> 
 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

Answer 1

残念ながらCSSは、フィルタセレクタ、p[data-result="INVALID"]:firstまたはp[data-result="INVALID"]:first-with-attributeのようなものを持っていません。最初に対応するアイテムをすべて赤色に設定し、次に同じアイテムの次の兄弟アイテムをすべて黒に戻して、必要な動作を模倣することができます。

大文字のクラス名、ID、属性、および何が紛らわしいかを使用して、コードにある2つの問題を指摘したいと思います。すべての小文字またはすべての大文字を使用してください。一部の人々（特にバックエンドの開発者）は、ラクダのケースを使用するのが好きですが、私はそれが好きではありません - それは個人的ですが。しかし、統一性と管理性のためには、1つの慣例に従うことをお勧めします。第二に、bタグはあなたが望むものではないかもしれません。以前は非常に便利なタグでしたが、多くの点でstrongタグを超えています。詳細については、以下のリンクを参照してください：

• MDN
• W3
• HTML5 Doctor

p[data-result="INVALID"] { 
 
    color: red 
 
} 
 

 
p[data-result="INVALID"] ~ p[data-result="INVALID"] { 
 
    color: black; 
 
}

<p data-result="VALID"><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> 
 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> 
 
<p data-result="INVALID"><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>

Answer 2

Iは、第一の型は、データの属性を区別していなかったことに気づいたことがありません！このようなことをすることができます。これは、最初のアイテムとして表示される場合、またはdata-result =が無効なPタグが前にある場合に取得されます。

p[data-result="INVALID"]:first-of-type, p:not([data-result="INVALID"]) + p[data-result="INVALID"]{ 
    styles here 
}