MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    :only-child

    概要

    CSS の :only-child 擬似クラス は、親要素の唯一の子要素である要素を表します。これは :first-child:last-child:nth-child(1):nth-last-child(1) と同じですが、詳細度はそれらより低くなります。

    構文

    parent child:only-child {
      property: value;
    } 
    

    基本的な例

    span:only-child {
      color: red;
    }
    
    <div>
        <span>この span は親の唯一の子です</span>
    </div>
    
    <div>
        <span>この span は親の二人いる子のうちの一人です</span>
        <span>この span は親の二人いる子のうちの一人です</span>
    </div> 
    

    表示例

    この span は親の唯一の子です
    この span は親の二人いる子のうちの一人です この span は親の二人いる子のうちの一人です

    リスト項目の例

    li li {
      list-style-type: disc;
    }
    li:only-child {
      color: #6699ff;
      font-style: italic;
      list-style-type: square;
    }
    <ol>
        <li>その 1
            <ul>
                <li>このリストには 1 つの要素だけがあります
            </ul>
        </li>
        <li>その 2
            <ul>
                <li>このリストには 2 つの要素があります
                <li>このリストには 2 つの要素があります
            </ul>
        </li>
        <li>その 3
            <ul>
                <li>このリストには 3 つの要素があります
                <li>このリストには 3 つの要素があります
                <li>このリストには 3 つの要素があります
            </ul>
        </li>
    <ol>
    
    1. その 1
      • このリストには 1 つの要素だけがあります
    2. その 2
      • このリストには 2 つの要素があります
      • このリストには 2 つの要素があります
    3. その 3
      • このリストには 3 つの要素があります
      • このリストには 3 つの要素があります
      • このリストには 3 つの要素があります

    p:only-child {
      background: #6699ff;
      width: 350px;
    }
    <div>
        <p>これは :only-child の段落です</p>
    </div>
    

    これは :only-child の段落です

    仕様

    仕様書 策定状況 コメント
    Selectors Level 4 草案 変更なし
    Selectors Level 3 勧告 初回定義

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 2 1.5 (1.8) 9 9.5 3.1
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 2.1 1.0 (1.8) 9 10.0 3.1

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す