特定のグリッド位置にある要素を対象とするセレクタはありますか？

私は自動フローグリッド項目の束を持つCSSグリッドを持っています。グリッドアイテムは、1つの1 x 1トラックであり、時には2 x 2トラックである場合があります。したがって、はグリッド内の特定の位置にあるアイテムをソース順から認識しません。つまり、:nth-child()のスタイリングは信頼できません。特定のグリッド位置にある要素を対象とするセレクタはありますか？

特定のグリッド列のアイテム（ほとんどの場合は最後の列）にスタイリングを追加したいと思います。これらのアイテムのスタイルを変更するCSSセレクタはありますか？

たとえば、このデモでは、ボックス3,5、および9（（codepen here）のスタイルをどのようにしますか？

.grid-container { 
 
     display:grid; 
 
     grid-template-columns: 1fr 1fr 1fr; 
 
     grid-column-gap: 1em; 
 
     grid-row-gap: 1em; 
 
    } 
 

 
    .grid-item { 
 
     background-color: #aea; 
 
     text-align:center; 
 
     font-size:3em; 
 
     min-height:3em; 
 
     line-height: 3em; 
 
    } 
 

 
    .grid-item.double { 
 
     grid-column-start: span 2; 
 
     grid-row-start: span 2; 
 
    }

<body> 
 
<div class="grid-container"> 
 

 
    <div class="grid-item">1</div> 
 
    <div class="grid-item">2</div> 
 
    <div class="grid-item">3</div> 
 
    <div class="grid-item">4</div> 
 
    <div class="grid-item double">5</div> 
 
    <div class="grid-item">6</div> 
 
    <div class="grid-item">7</div> 
 
    <div class="grid-item">8</div> 
 
    <div class="grid-item">9</div> 
 
    <div class="grid-item">10</div> 
 
</div> 
 
</body>

編集：コードはCMSになってしまいますし、将来的に変更されることがあります。

出典

2017-05-24 John B

多分[この質問]（https://stackoverflow.com/questions/41577309/how-do-i-access-certain-column-in-bootstrap-grid-system）何らかの形であなたを助けることができますか？ –

@kevinb。それは "グリッド"フレームワークのブートストラップです。 OP：CSS nativeを使って 'display：grid;' –

'：nth-child'だけではないのはなぜですか？ –

グリッドがCSSを使用してレンダリングされるとき、特定のグリッド位置で要素を一致させるセレクタはありません。 grid-structural selectors introduced in Selectors 4は、HTMLの表など、文書セマンティクスで表されるグリッド構造に基づく要素にのみ一致します（display: table-*を使用してレンダリングされた非表要素の場合にも、グリッドセマンティクスに基づく要素と一致しないことを意味します）。

フレックスボックスにも同様の問題があります。特定のフレックスアイテムをレイアウトする方法に基づいてマッチさせるセレクタはありません。一般に、CSSによって管理されるレイアウトに基づいて要素に一致するセレクタはありません。セレクタは、ドキュメントのセマンティクス（ソースの順序など）に基づいた要素にのみ一致します。

希望する要素をスタイルするには、クライアントサイドスクリプトや、グリッド位置に基づいて要素をクラスにラベル付けするバックエンドロジックなど、他の手段を使用して要素を識別する必要がありますバックエンド内）。あなたはこれをどうやってこの質問の範囲外です。

出典

2017-05-24 15:23:31 BoltClock

それは私が恐れていたものです。私はセレクター5以上を待たなければならないと思う。 –

特定のグリッド位置にある要素を対象とするセレクタはありますか？

答えて

関連する問題