web-dev-qa-db-ja.com

インラインスタイルでnth-child（）スタイルを追加する方法

要素（明らかに、複数の要素を含む）にインラインスタイルを適用しながら、nth-child(n)宣言を追加するには.

たとえば、3つのdiv要素を含むpがあるとします。

一般的なスタイルシートルールは次のようになります。

div p:nth-child(2) {
  color: blue;
}

しかし、それを含むdivにインラインスタイルを適用しながら、2番目の段落をまだ青色にするにはどうすればよいですか？

htmlcssinline-styles
12
Abhimanyu

インラインスタイル属性は、属性を持つ要素にのみ関係します。したがって、たとえば、divにスタイル属性がある場合、スタイルはそのdivにのみ適用されます（継承されたプロパティと競合するスタイルにもかかわらず）。別の要素のインラインスタイル属性を使用して別の要素をターゲットにすることはできません。

p要素にスタイル属性を適用しても、疑似クラスに基づいてインラインスタイルを条件付きで適用することはできません。理由については、 この質問 に対する私の回答を参照してください。ただし、マークアップが動的に生成される場合は、同様のロジックを使用して、最初にスタイル属性を印刷するかどうかを制御できますが、これは質問の範囲外です。

9
BoltClock

nth-child(n)宣言をインラインスタイルとして適用する理由は、CSSファイルを編集できないか、編集したくないためです。ただし、スタイルをページに直接適用する必要がある場合は、<style>問題のdivの横にあるタグ：

<style>
  div.myContainer p:nth-child(2) {
    color: blue;
  }
</style>
<div class="myContainer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

これは、コードを構造化するための理想的な方法ではありません。適切にフォーマットされたセマンティックマークアップを作成するには、スタイルとHTML /コンテンツを分離する必要があります。

また、このスタイリングを複数の場所に適用する必要がある場合は、乱雑になったり、一貫性が失われたりする可能性があります。ただし、プロジェクトによっては例外が発生する場合があることを理解しています。

4
Kevin Vess
li:nth-child(10n-2) {
    background: red;
}

これは私のソースコードのベースです！

0
Subraa PD