メインコンテンツへスキップ

no-descending-specificity

より高い特異性を持つ上書きセレクターの後に、より低い特異性を持つセレクターが続くことを許可しません。

    #container a { top: 10px; } a { top: 0; }
/** ↑                           ↑
 * The order of these selectors represents descending specificity */

CSSではソースの順序が重要であり、2つのセレクターが同じ特異性を持つ場合、最後に出現したセレクターが優先されます。しかし、セレクターの1つがより高い特異性を持つ場合は状況が異なります。この場合、ソースの順序は関係ありません。より高い特異性を持つセレクターは、最初に記述されていても優先されます。

優先順位付けのためのこれら2つのメカニズム、ソース順序と特異性の衝突は、スタイルシートを読み解く際に混乱を引き起こす可能性があります。より高い特異性を持つセレクターが、上書きするセレクターの前に来る場合、ソース順序の期待に反するため、理解するためにさらに考えなければなりません。スタイルシートは、上書きするセレクターが常に上書きするセレクターの後に来る場合に最も読みやすくなります。このようにすることで、ソース順序と特異性の両方のメカニズムがうまく連携します。

このルールは、その慣例を可能な限り強制し、実際よりも少ないエラーを報告します。すべての実際の上書きセレクターをキャッチできるわけではありませんが、特定の一般的な間違いをキャッチできます。

多くのネストを使用する場合は、このルールをオフにすることをお勧めします。

message セカンダリオプションは、このルールの引数を受け入れることができます。

動作の仕組み​

このルールは、すべてのフルセレクターの最後の複合セレクターを確認し、スタイルシート内で同じように終わる他のセレクターと比較します。

したがって、.foo .bar（最後の複合セレクターは.bar）は、.barおよび#baz .barと比較されますが、#baz .fooまたは.bar .fooとは比較されません。

また、a > li#wag.pit（最後の複合セレクターはli#wag.pit）は、div li#wag.pitおよびa > b > li + li#wag.pitと比較されますが、liまたはli #wagなどとは比較されません。

疑似要素をターゲットとするセレクターは、レンダリングされたページの他の要素をターゲットとするため、疑似要素のない類似のセレクターと比較可能とは見なされません。たとえば、a::before {}は、a:hover {}と比較されません。a::beforeは疑似要素をターゲットとし、a:hoverは実際の<a>をターゲットとするためです。

このルールは、同じメディアコンテキスト内にあるルールのみを比較します。したがって、a {} @media print { #baz a {} }は問題ありません。

このルールは、セレクターの特異性を計算する前に、ネストされたセレクターを解決します。

DOMの制限​

リンターは、特異性の順序を確認するためにCSSのみをチェックできます。CSSの使用を解釈するために、HTMLまたはDOMにアクセスすることはできません。

これにより、一見すると無効に見える有効なリンティングエラーが発生する可能性があります。

たとえば、次はエラーを引き起こします

.component1 a {}
.component1 a:hover {}
.component2 a {}

これは正しいエラーです。2行目のa:hoverは、3行目のaよりも高い特異性を持っているためです。

「2つのセレクターはDOMで同じaに一致することはない」ため、これは混乱を招く可能性があります。ただし、リンターはDOMにアクセスできないため、これを評価できず、したがって、特異性が降順ではないというエラーを正しく報告します。

エラーを削除するためにCSSを再構成することは可能ですが、それ以外の場合は、その行のルールを無効にし、エラーを無視する必要がある理由を示すコメントを残すことをお勧めします。ルールを無効にすると、追加の有効なエラーが報告されることに注意してください。

オプション​

true​

次のパターンは問題と見なされます

b a {}
a {}
a + a {}
a {}
b > a[foo] {}
a[foo] {}
a {
  & > b {}
}
b {}
@media print {
  #c a {}
  a {}
}

次のパターンは問題とは見なされません

a {}
b a {}
a {}
a + a {}
a[foo] {}
b > a[foo] {}
b {}
a {
  & > b {}
}
a::before {}
a:hover::before {}
a {}
a:hover {}
@media print {
  a {}
  #c a {}
}
a {}
@media print {
  #baz a {}
}

オプションのセカンダリオプション​

ignore: ["selectors-within-list"]​

セレクターのリスト内のセレクターを無視します。

次のパターンは問題と見なされます

b a {}
h1 {}
h2 {}
h3 {}
a {}

次のパターンは問題とは見なされません

b a {}
h1, h2, h3, a {}