CSS でクラスや ID を使用せずにチェス盤を作成するにはどうすればよいでしょうか?

純粋な CSS チェスボード: Div の調査とクラスと ID の回避

CSS のみを使用してチェスボードを作成し、クラスや ID は困難な作業のように思えるかもしれません。しかし、これは、この課題を割り当てられたプログラマを含む、多くの人々の好奇心をそそるタスクです。

提供された HTML レイアウトは、多数のネストされた

で構成されています。要素が含まれており、チェス盤のパターンのスタイリングに独特の課題が生じています。 nth-child() セレクターを利用した従来のアプローチは失敗していることが証明されています。

アプローチを再考する

特定の個々の要素を直接ターゲットにする代わりに、次のような別のアプローチを活用できます。特定のグループ内の交互の要素の外観を変更します。ここで、奇数および偶数の擬似クラスの威力が真に発揮されます。

たとえば、テーブルについて考えてみましょう。

<code class="html"><table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

CSS を使用すると、内部の交互の行と列をターゲットにできます。このテーブル:

<code class="css">table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}

table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}</code>

この CSS ルールは、行と列内の位置に基づいて特定のセルの背景色を設定します。そうすることで、チェス盤に効果的に似たチェッカーボード パターンが作成されます。

エレガントで効率的

このアプローチは、純粋なチェス盤を使用してチェス盤を作成するクリーンで効率的な方法を提供します。 CSS、クラスと ID を避けるという制約を忠実に守ります。これは、CSS セレクターの多用途性と、特定の構造内での位置に基づいて要素をターゲットにする機能を示しています。

したがって、最初は型破りなアプローチのように見えたかもしれませんが、奇数および偶数の擬似の力を利用しています。 -classes は、ソリューションのロックを解除する鍵を提供しました。

以上がCSS でクラスや ID を使用せずにチェス盤を作成するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。