iPentec.com / Doc / CSS / CSSセレクター

最初、n番目などの指定した位置にある要素のスタイルを設定する - Child系疑似クラス - CSS

スタイルシートを用いて特定の位置にある子要素のスタイルを設定するコードを紹介します。

書式

最初の位置の要素のスタイル設定

最初の要素のスタイルを設定する場合は"first-child"疑似クラスを用います。

最初の位置にある指定したタグに設定する場合

 (タグ名):first-child{
   (スタイル記述)
 }

最初の位置にある指定したクラスに設定する場合

 .(クラス名):first-child{
   (スタイル記述)
 }

最初の位置にある指定したIDに設定する場合

 #(ID名):first-child{
   (スタイル記述)
 }

指定した位置の要素のスタイル設定

n番目の子要素のスタイルを設定する場合は、"nth-of-type"疑似クラスを用います。

指定した位置にあるタグに設定する場合

 (タグ名):nth-of-type((指定する子要素)){
   (スタイル記述)
 }

指定した位置にあるクラスに設定する場合

 .(クラス名):first-of-type((指定する子要素)){
   (スタイル記述)
 }

指定した位置にあるIDに設定する場合

 #(ID名):first-of-type((指定する子要素)){
   (スタイル記述)
 }

記述例1

コード

下記コードを記述します。

ChildSelector.css

li {
  color:#2020A0;
}

li:first-child {
  color:#A020A0;
}

ChildSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ChildSelector.css" />
</head>
<body>
    <ul>
        <li>最初の要素</li>
        <li>2番目の要素</li>
        <li>3番目の要素</li>
        <li>4番目の要素</li>
        <li>5番目の要素</li>
    </ul>

    <ol>
        <li>最初の要素</li>
        <li>2番目の要素</li>
        <li>3番目の要素</li>
        <li>4番目の要素</li>
        <li>5番目の要素</li>
    </ol>
</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。最初の要素の文字色が別の色で描画されます。

記述例2

コード

ChildSelector.css

li {
  color:#2020A0;
}

li:nth-of-type(4) {
  border:2px #00ff21 solid;
}

ChildSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ChildSelector.css" />

</head>
<body>
    <ul>
        <li>最初の要素</li>
        <li>2番目の要素</li>
        <li>3番目の要素</li>
        <li>4番目の要素</li>
        <li>5番目の要素</li>
    </ul>

    <ol>
        <li>最初の要素</li>
        <li>2番目の要素</li>
        <li>3番目の要素</li>
        <li>4番目の要素</li>
        <li>5番目の要素</li>
    </ol>
</body>
</html>

解説

li:nth-of-type(4) {
  border:2px #00ff21 solid;
}

"nth-of-type(4)"を指定することにより、4番目の要素のスタイルを指定できます。上記の例では"border"プロパティを設定して枠を描画するスタイルに変えています。

表示結果

上記のHTMLファイルをWebブラウザで表示すると、下図の画面が表示されます。4番目の要素に枠が描画されます。

このページのキーワード

最初、n番目などの指定した位置にある要素のスタイルを指定する - Child系疑似クラス
最初、n番目などの指定した位置にある要素のスタイルを適用する - Child系疑似クラス

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

最初、n番目などの指定した位置にある要素のスタイルを設定する - Child系疑似クラス - CSS

書式

最初の位置の要素のスタイル設定

指定した位置の要素のスタイル設定

記述例1

コード

表示結果

記述例2

コード

解説

表示結果

関連するページ