• Home
  • 開発
  • CSS3で良く使う疑似クラスについてのサンプルをご紹介します

CSS3で良く使う疑似クラスについてのサンプルをご紹介します

こんにちは！ぐちです。

ScalaとJavaの例のシリーズが続いていますが、今回は最近訳あって勉強しているCSS3(HTML5)の疑似クラスについてサンプル付きでご紹介したいと思います！

疑似クラスとは

CSSの疑似クラスはセレクタに付加するキーワードです。要素に対して特定の状態を指定でき、例えば:hover疑似クラスは、選択した要素上にマウスカーソルがあるときにスタイルを適用します。

要するに特定の状態であったり、特定の条件の場合にスタイルを指定することができるということです。

で、そういった擬似クラスの中でも良く使うであろう:nth-childをご紹介したいと思います。

:nth-child

この擬似クラスを始めいくつかの擬似クラスはパラメータに式を取るのですが、その式の動きがよくわからなかったというか、理解するのにすこーーーーしだけ時間がかかったので、以下サンプル付きで。

書式としては下記の通りです。

:nth-child(an+b) もしくは :nth-child(odd [even])

an+bというのは、aとbの部分を整数に置き換えて考えます。nは要素が繰り返される場合に0から順番にカウントアップされます。

基準となるテーブルは以下のものを使いますね。画面はGoogle Chromeで行っていますので他のブラウザだと少し異なる可能性はあります。

  • CSS 
    table.t1 {
    border-collapse: collapse;
    text-align: left;
    line-height: 1.5;
}
table.t1 th {
    width: 100px;
    padding: 10px;
    vertical-align: top;
    border: 1px solid #ccc;
}
table.t1 td {
    width: 300px;
    padding: 10px;
    vertical-align: top;
    border: 1px solid #ccc;
}

  • HTML

    <table class="t1">
    <tr>
        <th scope="row">ほげ</th>
        <td>テストテストテストテスト</td>
    </tr>
    <tr>
        <th scope="row">ほげ</th>
        <td>テストテストテストテスト</td>
    </tr>
    <tr>
        <th scope="row">ほげ</th>
        <td>テストテストテストテスト</td>
    </tr>
    <tr>
        <th scope="row">ほげ</th>
        <td>テストテストテストテスト</td>
    </tr>
    <tr>
        <th scope="row">ほげ</th>
        <td>テストテストテストテスト</td>
    </tr>
</table>

nth-child(odd)

oddを指定すると奇数行だけにスタイルを適用することができます。

  • CSS 
    table.t1 {
    border-collapse: collapse;
    text-align: left;
    line-height: 1.5;
}
table.t1 th {
    width: 100px;
    padding: 10px;
    vertical-align: top;
    border: 1px solid #ccc;
}
table.t1 td {
    width: 300px;
    padding: 10px;
    vertical-align: top;
    border: 1px solid #ccc;
}
/* これ！ */
table.t1 tr:nth-child(odd) {
    background: #ccc;
}

以降は当該スタイルのみ記載しますね。

nth-child(even)

evenを指定すると偶数行だけにスタイルを適用することができます。

  • CSS 
    table.t1 tr:nth-child(even) {
    background: #ccc;
}

nth-child(2n) もしくは 2n+0

これはevenを指定したときと同じスタイルになります。2 * n + 0という計算式になり、0を省略した形となります。

nth-child(2n+1)

これはoddを指定したときと同じスタイルになります。2 * 0 + 1、2 * 1 + 1 … となり、奇数行にスタイルが適用されます。

nth-child(2)

数値だけを指定すると2行目だけにスタイルを適用することができます。

  • CSS 
    table.t1 tr:nth-child(2) {
    background: #ccc;
}

nth-child(n+3)

n+3を指定すると3行目以降にスタイルを適用することができます。

  • CSS 
    table.t1 tr:nth-child(n+3) {
    background: #ccc;
}

パターンとしてはこんなところですかね。数字を色々と変えて試してみてください。

では今回はこの辺で。